动态渲染el-table表头项+自定义el-table列表项
现在不少项目的表格需要结合穿梭框动态显示表头有哪些项，但按照el-table原本的设置，有多少项就直接在html写多少个el-table-column，这样对于动态显示内容来说很麻烦，下面看简单的实现效果
这是默认全都显示
选择隐藏项
这是选择后的列表内容
下面上代码
//右边的抽屉和里面的穿梭框<el-drawertitle=""size="800px":visible.sync="drawer":direction="direction":before-close="handleClose"><el-transferfilterableid="myTransfer":titles="titles":filter-method="filterMethod"filter-placeholder="请输入城市拼音"v-model="value":data="data"@change="handleChange"></el-transfer></el-drawer>
//表格内容<el-table :data="tableData" style="width: 100%"><template v-for="(item, index) in data">//这是基础样式项<el-table-columnv-if="item.label != '操作' && item.label != '就诊状态'":prop="item.value":label="item.label":key="index"align="center"></el-table-column>//就诊状态前面需要有个小伪元素所以就用了自定义列<el-table-columnv-if="item.label == '就诊状态'"label="就诊状态"align="center"class-name="status_col":key="index"><template slot-scope="scope"><iclass="status":style="{color: statusColor[scope.row.state] }"></i><span style="margin-left: 10px">{{ scope.row.stateName }}</span></template></el-table-column>//操作里面还需要再循环一次所以也用了自定义列<el-table-columnv-if="item.label == '操作'"prop="state"label="操作"align="center":key="index"><template slot-scope="scope"><spanv-for="ele in scope.row.operations"style=" display: inline-block; margin-left: 10px; cursor: pointer;":class="{ stop: ele.id == 1 }":key="ele.id">{{ ele.title }}</span></template></el-table-column></template></el-table>
export default {data() {const generateData = (_) => {const data = [];const cities = ["序号","姓名","性别","年龄","手机号","就诊状态","就诊时间","科室","操作",];const pinyin = ["xuhao","xingming","xingbie","nianling","shoujihao","jiuzhenzhuangtai","jiuzhenshijian","keshi","caozuo",];const value = ["id","patientName","sexName","age","phone","stateName","acceptsTime","departmentName","zhuangtai","",];cities.forEach((city, index) => {data.push({label: city,key: index,pinyin: pinyin[index],value: value[index],});});return data;};return {statusColor: ["#FF5252", "#1CD86C", "#2C92F0", "#6E6E6E", "#FF52A3"],operations: [],drawer: false,direction: "rtl",tableHeader:[],data: generateData(),value: [],titles: ["显示", "隐藏"],filterMethod(query, item) {return (item.label.indexOf(query) > -1 || item.pinyin.indexOf(query) > -1);},movedKeys: [],};},created() {this.getMedicalList();this.tableHeader = this.data;},methods：{//关闭右边抽屉并更新表头内容handleClose(done) {done();this.tableHeader = this.data.filter((item, index) => {if (this.movedKeys.indexOf(index) == -1) {return item;} });},//穿梭框数据左右移动handleChange(value, direction, movedKeys) {if (direction == "right") {movedKeys.forEach((item) => {this.movedKeys.push(item);});} else {this.movedKeys = this.movedKeys.filter((item) => {let newItem;movedKeys.forEach((ele) => {if (item != ele) {newItem = item;}});return newItem;});}},}//获取就诊列表（这是我从后台请求的列表数据）async getMedicalList() {let req = {patientName: this.name,patientPhone: this.tel,length: 20,page: this.currentPage1,deptId: this.department,state: Number(this.status),startTime: this.time[0],endTime: this.time[1],};let res = await this.$store.dispatch("recievePatient/getMedicalList",req);if (res) {this.tableData = res.list;//根据就诊状态判断操作类型res.list.forEach((item) => {if (item.state == 3) {item.operations = [{id: 0,title: "查看",},{id: 2,title: "---",},];} else {item.operations = [{id: 0,title: "查看",},{id: 1,title: "停诊",},];}});} else {this.tableData = [];}},
