antd 表格设置动态列（动态表头）

1、需求：勾选中某个项，表格就展示对应的数据，反之则不显示

2、表格的 columns 动态赋值（刚开始默认全部不展示）

html:
<div class="checkBox"><a-checkbox @change="changeData" :checked="dataRate">数据传输完整率</a-checkbox><a-checkbox @change="changeTimely" :checked="timelyRate">及时率</a-checkbox><a-checkbox @change="changeMutation" :checked="mutationRate">突变率</a-checkbox><a-checkbox @change="changeFault" :checked="faultRate">故障率</a-checkbox><a-checkbox @change="changeAlarm" :checked="alarmRate">告警率</a-checkbox>
</div>
<div class="groupManage-table"><a-table:columns="columns":data-source="tableData"rowKey="deviceId":loading="dataLoad":pagination="pagination"@change="changePages"><template slot="ownerUnit" slot-scope="text"><span v-if="text == '1'">本项目</span><span v-if="text == '2'">区水务局</span><span v-if="text == '3'">排水公司</span><span v-if="text == '4'">其他</span><span v-if="text == '5'">全部</span><span v-if="text == ''">--</span></template><template slot="dataCompleteRate" slot-scope="text"><span>{{ text }}%</span></template><template slot="timelinessRate" slot-scope="text"><span>{{ text }}%</span></template><template slot="mutationRate" slot-scope="text"><span>{{ text }}%</span></template><template slot="failureRate" slot-scope="text"><span>{{ text }}%</span></template><template slot="alarmRate" slot-scope="text"><span>{{ text }}%</span></template><template slot="action" slot-scope="record"><a href="javascript:void(0);" @click="handleDetail(record)">查看</a></template><template slot="expandedRowRender" slot-scope="record"><row-detail :record="record" /></template></a-table>
</div>
js：
data() {return {dataRate: false,timelyRate: false,mutationRate: false,faultRate: false,alarmRate: false,};
},
created() {this.columns = [{title: "设备类型",dataIndex: "deviceTypeName",ellipsis: true,},{title: "设备编码",dataIndex: "deviceCode",width: 140,},{title: "运维单位",dataIndex: "ownerUnit",scopedSlots: { customRender: "ownerUnit" },ellipsis: true,},{title: "操作",width: 70,scopedSlots: { customRender: "action" },},];
},
watch: {// 动态改变表头dataRate: function (val) {if (val) {// 为true添加到表格this.columns.splice(this.columns.length - 1, 0, {title: "数据传输完整率",dataIndex: "dataCompleteRate",scopedSlots: { customRender: "dataCompleteRate" },width: 120,});} else {// 为false不显示在表格this.noRepeat(this.columns, {title: "数据传输完整率",dataIndex: "dataCompleteRate",scopedSlots: { customRender: "dataCompleteRate" },width: 120,});}},timelyRate: function (val) {if (val) {this.columns.splice(this.columns.length - 1, 0, {title: "及时率",dataIndex: "timelinessRate",scopedSlots: { customRender: "timelinessRate" },width: 90,});} else {this.noRepeat(this.columns, {title: "及时率",dataIndex: "timelinessRate",scopedSlots: { customRender: "timelinessRate" },width: 90,});}},mutationRate: function (val) {if (val) {this.columns.splice(this.columns.length - 1, 0, {title: "突变率",dataIndex: "mutationRate",scopedSlots: { customRender: "mutationRate" },width: 90,});} else {this.noRepeat(this.columns, {title: "突变率",dataIndex: "mutationRate",scopedSlots: { customRender: "mutationRate" },width: 90,});}},faultRate: function (val) {if (val) {this.columns.splice(this.columns.length - 1, 0, {title: "故障率",dataIndex: "failureRate",scopedSlots: { customRender: "failureRate" },width: 90,});} else {this.noRepeat(this.columns, {title: "故障率",dataIndex: "failureRate",scopedSlots: { customRender: "failureRate" },width: 90,});}},alarmRate: function (val) {if (val) {this.columns.splice(this.columns.length - 1, 0, {title: "告警率",dataIndex: "alarmRate",scopedSlots: { customRender: "alarmRate" },width: 90,});} else {this.noRepeat(this.columns, {title: "告警率",dataIndex: "alarmRate",scopedSlots: { customRender: "alarmRate" },width: 90,});}},
},

3、需要用到两个方法，一是判断对象相等；二是不通过下标删除数组的某一项（数组的项为对象）

// 判断两个对象是否相等
compareJsonObj(obj1, obj2) {let result = true;if (!isJsonObj(obj1) || !isJsonObj(obj2)) return false;for (let key in obj1) {if ((obj1[key] && !obj2[key]) ||(!obj1[key] && obj2[key]) ||(obj1[key] &&obj2[key] &&obj1[key].toString() !== obj2[key].toString())) {result = false;break;}}return result;// 判断一个对象是否是 json 对象function isJsonObj(data) {return (data && Object.prototype.toString.call(data) === "[object Object]");}
},
// 不通过下标删除数组中的项（项为对象）
noRepeat(arr1, item) {arr1.filter((its, index) => {if (this.compareJsonObj(its, item)) {arr1.splice(index, 1);}});return arr1;
},

4、代码是多了点儿，但完成了需求

生活没有不请自来的幸运，只有有备而来的惊艳

antd 表格设置动态列（动态表头）相关推荐

ExtJs 实现动态列,动态多表头在这里添加日志标题
先看看效果效果不错吧,就是样式稍微差点,没办法Extjs的表头是渐变的,不过样式改起来应该不难. 接下来是数据: "{columModle:[{header:\"用电单位\&qu ...
Bootstrap DataTable自定义表格设置某列不排序
很多情况下,我们使用外来插件不一定满足自己的业务需求.所以一般插件都会提供自定义的功能给用户做出自己想要的效果. DataTable提供的表格样式里面,第一行都是会有排序功能的,但是如果遇到我们想将第 ...
easyexcel 动态列_easyexcel动态表头列导出SequenceDiagram 阅读源码事半功倍
EasyExcel简介 Java解析.生成Excel比较有名的框架有Apache poi.jxl.但他们都存在一个严重的问题就是非常的耗内存,poi有一套SAX模式的API可以一定程度的解决一些内存溢 ...
Table固定列和表头
一.实现思路:表格数据中存在合并单元格,网上找了好多列子都没有实现.最后是把一个table拆分为两个table实现的,第一个table(table1)中是需要固定的列及表头(表头只固定前四列和时段流量 ...
jQuery - 实现设置指定列给动态表格的行生成自动序号
jQuery - 实现设置指定列给动态表格的行生成自动序号无表头表格 HTML jQuery 示意图有表头表格 HTML jQuery 示意图无表头表格 HTML <table id=&q ...
css画表格多级表头,element UI实现动态生成多级表头
一.效果图二.封装两个组件,分别为DynamicTable.vue和TableColumn.vue,TableColumn.vue主要是使用递归来对表头进行循环生成 DynamicTable.vue ...
Vue+Element表格动态列+表格分页
LayUI表格动态列及分页LayUI+JavaScript表格动态列+表格分页效果如图: 代码: 引用JQuery,Vue,Element等文件,换成自己的路径 <!DOCTYPE html& ...
ABP 多模块关联查询、分组统计、列转行、Vue 复合表头动态列
本文记录了一次使用abp Core5 ,vue 开发复杂报表的经历. 0.需求概述业务需求是:统计一个化工厂车队形式记录数据中异常停车的报表,维度可以按照车俩.驾驶员两个维度进行统计,统计的元素有: ...
[vue-element] ElementUI表格组件如何实现动态表头？
[vue-element] ElementUI表格组件如何实现动态表头? <template v-for="item in tableColownms"> <el ...

antd 表格设置动态列（动态表头）

1、需求：勾选中某个项，表格就展示对应的数据，反之则不显示

2、表格的 columns 动态赋值（刚开始默认全部不展示）

3、需要用到两个方法，一是判断对象相等；二是不通过下标删除数组的某一项（数组的项为对象）

4、代码是多了点儿，但完成了需求

生活没有不请自来的幸运，只有有备而来的惊艳

antd 表格设置动态列（动态表头）相关推荐

最新文章

热门文章