思路就是使用computed,先初始化一个表头根据某个变量,这里是this.getTypeCode给表头增加
行数据。
<a-table rowKey="id"size="small":pagination="false":columns="tableHeader":dataSource="tableData":bordered="true"><a slot="typeCode"slot-scope="value, record":href="void(0)"@click="edit(record)">{{value}}</a></a-table>
computed: {tableHeader () {let table = [{dataIndex: 'isEnable',title: "状态", //'状态',customRender: (value, record) => value == 1 ? '有效' : '无效'},{dataIndex: 'typeCode',title: "风险类型代码", //'风险类型代码',scopedSlots: { customRender: "typeCode" }},{dataIndex: 'typeName',title: "风险类型名称", //'风险类型名称',},{dataIndex: 'level',title: "风险等级", // '风险等级',customRender: (value, record) => value == 0 ? '低' : value == 1 ? '中' : '高'},];// 表格列数据if (this.getTypeCode == 'FXSZ_00000010') {//新闻與情table.push(// {// dataIndex: 'keywords',// title: "风险字眼", // '风险字眼'// customRender: (value, record) => value || '-'// },{dataIndex: 'newsTags',title: "新闻标签",customRender: (value, record) => value || '-'},);}else if (this.getTypeCode == 'FXSZ_00000001' || this.getTypeCode == 'FXSZ_00000002') {//吊销日期,营业期限至table.push({dataIndex: 'daysToExpire',title: "距离到期天数",// '距离到期时间',customRender: (value, record) => value || ''});}return table}
单选框代码
<template #typeCode="{ scope }"><a-select v-model="scope.typeCode"@change="selectChange(scope)"><a-select-option value="FXSZ_00000001">吊销日期</a-select-option><a-select-option value="FXSZ_00000002">营业期限至</a-select-option><a-select-option value="FXSZ_00000003">法人变更</a-select-option><a-select-option value="FXSZ_00000004">行政处罚(工商局)</a-select-option><a-select-option value="FXSZ_00000005">经营异常</a-select-option><a-select-option value="FXSZ_00000006">失信被执行人信息</a-select-option><a-select-option value="FXSZ_00000007">被执行信息</a-select-option><a-select-option value="FXSZ_00000008">大股东变更</a-select-option><a-select-option value="FXSZ_00000009">开庭公告核查</a-select-option><a-select-option value="FXSZ_00000010">新闻與情</a-select-option><a-select-option value="FXSZ_00000011">未按照份额下单</a-select-option><a-select-option value="FXSZ_00000012">品质异常</a-select-option><a-select-option value="FXSZ_00000013">必要资质过期</a-select-option></a-select></template>
选择触发代码
selectChange (value) {this.getTypeCode = value.typeCode//把组件的typeCode传递出去},
效果
添加:如果想让添加的表头放到前面,使用.splice添加表头数组即可,具体点代码
if (this.getTypeCode == 'FXSZ_00000010') {//新闻與情table.splice(4, 0,{dataIndex: 'newsTags',title: "新闻标签",customRender: (value, record) => value || '-'},);}//index是4,0表示不删除数组元素