- 两种方法: 1.文中加入组件(繁琐,每个弹窗都要对应有自己的组件) 2.render组件
- 严格说第二种是第一种的优化(文章记录过程)
- 过程: el-table-column :render-header="renderHeader" -> 利用renderHeader创建自定义点击样式和弹窗
基本思路: el-table提供的render-header渲染表头,renderstatus渲染dom节点;maskShowStatus显示弹窗;filtersStatusClick点击响应,发送请求;
伪代码:
template:
<el-table-column label="状态" prop="statusStr" :render-header="renderStatus"></el-table-column>
...
<table-pop :thisObjBox="this" :listData="filterRules.propsStatusData" v-if="renderStatusData.show" :pos="renderStatusData.pos" @filtersData="filtersStatusClick" :hasIndex="renderStatusData.indexTable"></table-pop> thisobjbox: 筛选返回第一页
listdata: 包含初始化数据,筛选列表的
renderStatusData: { // 状态
show: false, // 是否显示弹窗
pos: {}, // 位置
indexTable: '' // 筛选值
},
filtersStatusClick // 链接后台数据
js:
renderStatus (createElement, {column}) {
return createElement(