100字范文,内容丰富有趣,生活中的好帮手!
100字范文 > ant-desigin-vue的表格table按条件控制某些列的显示隐藏(二)

ant-desigin-vue的表格table按条件控制某些列的显示隐藏(二)

时间:2022-10-09 06:52:25

相关推荐

ant-desigin-vue的表格table按条件控制某些列的显示隐藏(二)

思路就是使用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表示不删除数组元素

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。