需求就是:利用第一个表格去替换第二个表格中的是否启用那一列
第一个表格写在页面,第二个表格是用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
}
];
},
效果图
渲染出来的效果又是这样的
这种情况下我就写了页面的开关表格,然后开关表格替换掉换端给我的返回值