vue+elementui表格中是否启用这一列添加开关按钮

Question

elementUI表格中这样写switch表格是否没有任何作用？效果图

封装的表格代码

<template>
	<div>
		<!-- 表格 -->
		<el-table :data="tableData" ref="tableRef" @selection-change="handleSelectionChange" border>
			<!-- 复选框 -->
			<el-table-column v-if="isCheckbox" type="selection" align="center" fixed="left" width="60"></el-table-column>
			<!-- 序号 -->
			<el-table-column v-if="isIndex" type="index" label="序号" align="center" width="60">
				<template slot-scope="scope"><span>{{ scope.row.typeIndex }}</span></template>
			</el-table-column>
			<!-- 表格数据 -->
			<template v-for="(colItem, colIndex) in cols">
				<el-table-column :align="colItem.align ? colItem.align :'center'" :prop="colItem.propName"
					:label="colItem.label" :width="colItem.width" show-overflow-tooltip :key="colIndex">
					<template slot-scope="scope">
						<img width="36px" height="36px" :src="scope.row.imageUrl" v-if="colItem.propName == 'imageUrl'" />
						<template v-else-if="colItem.propName == 'imageList'">
							<img width="36px" height="36px" :src="img.path" v-for="(img,imgIndex) in scope.row.imageList" :key="imgIndex" />
						</template>
						<template v-else-if="colItem.propName == 'imageData'">
							<div class="tdCenter">
								<img v-show="scope.row.imageData.images && scope.row.imageData.images.length > 0" width="36px" height="36px" :src="img.path" v-for="(img,imgIndex) in scope.row.imageData.images" :key="imgIndex" />
								<span v-show="scope.row.imageData.title">{{ scope.row.imageData.title }}</span>
							</div>
						</template>
						<template v-else>{{ scope.row[colItem.propName] }}</template>
					</template>
				</el-table-column>
			</template>
			<!-- 操作栏 -->
			<el-table-column label="操作" align="center" fixed="right" width="220" :resizable="false">
				<template slot-scope="scope">
					<div class="comtable-operator-content">
						<template v-for="val in handleData">
							<el-button size="small" type="general" plain @click="handleFunc(scope, val)" :key="val"
								v-if="val == 'edit'">编辑</el-button>
							<el-button size="small" type="primary" plain @click="handleFunc(scope, val)" :key="val"
								v-if="val == 'check'">查看</el-button>
							<el-button size="small" type="danger" plain @click="handleFunc(scope, val)" :key="val"
								v-if="val == 'delete'">删除</el-button>
						</template>
					</div>
				</template>
			</el-table-column>
		</el-table>

		<!-- 分页 -->
		<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :total="total"
			:page-size="pageSize" :current-page="page" layout="total, sizes, prev, pager, next, jumper">
		</el-pagination>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				page: 1,
				pageSize: 10
			};
		},
		props: {
			// 是否存在复选框
			isCheckbox: {
				type: Boolean,
				default: true
			},
			// 是否存在序号列
			isIndex: {
				type: Boolean,
				default: true
			},
			// 列表数据
			tableData: {
				type: Array,
				default () {
					return [];
				}
			},
			// 列数据
			cols: {
				type: Array,
				default () {
					return [];
				}
			},
			// 操作栏数据
			handleData: {
				type: Array,
				default () {
					return ['check', 'delete'];
				}
			},
			// 表格数据总条数
			total: {
				type: [Number, String],
				default: 0
			},
			// 表格当前页数
			pageNumber: {
				type: [Number, String],
				default: 1
			}
		},
		methods: {
			// 表格操作事件
			handleFunc(event, buttonType) {
				event.buttonType = buttonType;
				this.$emit("handleFunc", event);
			},
			// 当前页显示条目个数改变事件
			handleSizeChange(val) {
				this.page = 1;
				this.pageSize = val;
				this.$emit('getList', {
					limit: val,
					page: 1
				})
			},
			// 当前页数改变事件
			handleCurrentChange(val) {
				this.page = val;
				this.$emit('getList', {
					page: val
				})
			},
			// 勾选复选框事件
			handleSelectionChange(val) {
				this.$emit("handleSelectionChange", val);
			},
			// 清除所有复选框
			handleClear() {
				this.$refs.tableRef.clearSelection();
			}
		},
		watch: {
			tableData(newVal) {
				this.tableData = newVal;
				if (this.tableData.length > 0) {
					this.tableData.forEach((item, index) => {
						item['typeIndex'] = Number(index + (this.page - 1) * this.pageSize + 1);
					})
				}
				this.$forceUpdate();
			},
			total(newVal) {
				this.total = Number(newVal);
			},
			pageNumber(newVal) {
				this.page = Number(newVal);
			}
		}
	};
</script>

<style></style>

Answer 1

<template v-for="(colItem, colIndex) in cols">
  <el-table-column
    :align="colItem.align ? colItem.align : 'center'"
    :prop="colItem.propName"
    :label="colItem.label"
    :width="colItem.width"
    show-overflow-tooltip
    :key="colIndex"
  >
    <template slot-scope="scope">
      <img
        width="36px"
        height="36px"
        :src="scope.row.imageUrl"
        v-if="colItem.propName == 'imageUrl'"
      />
      <template v-else-if="colItem.propName == 'imageList'">
        <img
          width="36px"
          height="36px"
          :src="img.path"
          v-for="(img, imgIndex) in scope.row.imageList"
          :key="imgIndex"
        />
      </template>
      <template v-else-if="colItem.propName == 'imageData'">
        <div class="tdCenter">
          <img
            v-show="scope.row.imageData.images && scope.row.imageData.images.length > 0"
            width="36px"
            height="36px"
            :src="img.path"
            v-for="(img, imgIndex) in scope.row.imageData.images"
            :key="imgIndex"
          />
          <span v-show="scope.row.imageData.title">{{ scope.row.imageData.title }}</span>
        </div>
      </template>
      <template v-else-if="colItem.propName == 'status'">
        <el-switch>
          <!-- 这里写你的开关 -->
        </el-switch>
      </template>
      <template v-else>{{ scope.row[colItem.propName] }}</template>
    </template>
  </el-table-column>
</template>

试试看