vue第一个表格替换第二个表格的某一列，如何替换？或者在加粗黑体部分中添加el-switch开关

Question

需求就是：利用第一个表格去替换第二个表格中的是否启用那一列

第一个表格写在页面，第二个表格是用js创建的

 

页面
<template>
	<div>
		<div class="cont">
				<el-row type="flex" justify="space-between">
					<el-col :span="4">
						<el-button size="medium" type="primary" plain @click="refresh"><i class="iconfont iconshuaxin"></i></el-button>
						<el-button size="medium" type="primary" @click="addLabel"><i class="el-icon-plus"></i>添加标签</el-button>
					</el-col>
					<el-col :span="18" class="el-col-flex-right">
						<el-button :type="changeList.length > 0 ? 'danger' : 'info'" :plain="changeList.length > 0 ? false : true" :disabled="changeList.length > 0 ? false : true"
							@click="confirmData({type:'delete'})">批量删除</el-button>
						<el-button @click="checkRecycle">回收站</el-button>
					</el-col>  
				</el-row>
				<!-- 开关表格区域 -->
				<el-table :data="storeData" border class="table" :content="addShopRuleForm">
				  <el-table-column label="是否启用" align="center">
				    <template slot-scope="scope">
				      <el-switch 
				              v-model="scope.row.status"
				              :active-value="1"
				              :inactive-value="0"
				              active-color="#13ce66"
				              inactive-color="#ff4949"
				              @change="changeStatus($event,scope.row,scope.$index)">
				          </el-switch>
				    </template>
				  </el-table-column>
				</el-table>                  
				<tableModule v-if="col.length > 0" :tableData="tableData" :cols="col" :handleData="handleData" :total="total" :pageNumber="page"
					@handleSelectionChange="handleSelectionChange" @handleFunc="handleFunc" @getList="getList" ref="tableRef"></tableModule>
		</div>
	</div>
</template>

注意我的第二个表格创建不是页面代码而是在created中创建的，如下

getTableCol() {
			this.col = [{
				propName: "store_name",
				label: "门店名称",
				width: 180
			}, {
				propName: "address",
				label: "门店地址",
				width: 320
			}, {
				propName: "store_man",
				label: "联系人"
			}, {
				propName: "store_tel",
				label: "联系电话",
				width: 180
			}, {
				propName: "update_time",
				label: "加入时间",
				width: 180
			},
            //这里是一个开关，而不是返回后台的数据
            {
				propName: "status",
				label: "是否启用",
				width: 180,
				 isSlot:true
			}
            ];
		},

效果图

渲染出来的效果又是这样的

 

这种情况下我就写了页面的开关表格，然后开关表格替换掉换端给我的返回值

Answer 1

如果你的tableModule也是使用el写的话，那么你的el-table-column一定是v-for渲染出来的，

{
                propName: "status",
                label: "是否启用",
                width: 180,
                isSlot:true
            }

在你的col这一个对象加上isSlot为true,for循环渲染时如果为true，则里面加一层

 <template slot-scope="scope">
                        <el-switch 
                                                v-model="scope.row.status"
                                :active-value="1"
                                :inactive-value="0"
                                active-color="#13ce66"
                                inactive-color="#ff4949"
                                @change="changeStatus($event,scope.row,scope.$index)">
                            </el-switch>
                      </template>

只需要使用你的第二个表格就行了