首先是数据准备:
复选框数据:
const tradeSelections = [
{eng:'tradetype', name:"交易类型"},
{eng:'ordertype', name:"下单类型"},
{eng:'dealnum', name:"成交数量"},
{eng:'dealprice', name:"成交价"},
{eng:'dealline', name:"成交额"},
{eng:'entrustnum', name:"委托数量"},
{eng:'entrustprice', name:"委托价格"},
{eng:'cpl', name:"平仓盈亏"},
{eng:'charge', name:"手续费"},
];
这里面之所以写成对象,是因为eng是为了拿到值,因为tableData里面要根据eng的的值去拿到真正的value值,eng就是key,
name就是为了渲染复选框和table表格的表头值,他们都是使用中文。
表格数据:
data() {
return {
tableData: [
{
date: "2016-05-02",
time: "9:00",
city: "螺纹钢",
tradetype: "开多",
ordertype: "市价单",
dealnum: 100,
dealprice: 90000,
dealline: 10000,
entrustnum: 888,
entrustprice: 999,
cpl: "0.33%",
charge: 10,
},
{
date: "2016-05-02",
time: "9:00",
city: "螺纹钢",
tradetype: "开多",
ordertype: "市价单",
dealnum: 100,
dealprice: 90000,
dealline: 10000,
entrustnum: 888,
entrustprice: 999,
cpl: "0.33%",
charge: 10,
},
{
date: "2016-05-02",
time: "9:00",
city: "螺纹钢",
tradetype: "开多",
ordertype: "市价单",
dealnum: 100,
dealprice: 90000,
dealline: 10000,
entrustnum: 888,
entrustprice: 999,
cpl: "0.33%",
charge: 10,
},
{
date: "2016-05-02",
time: "9:00",
city: "螺纹钢",
tradetype: "开多",
ordertype: "市价单",
dealnum: 100,
dealprice: 90000,
dealline: 10000,
entrustnum: 888,
entrustprice: 999,
cpl: "0.33%",
charge: 10,
},
],
key: 1, // table key
checkList: [],//被选中的选项eng数组
formThead: [],//渲染的表头
tradeSelections,
};
},
渲染数据:
//复选框
{{item.name}}
//table表格
{{ scope.row[item.eng] }}
对复选框进行监控:
watch: {
checkList(val) {
this.formThead = this.tradeSelections.filter(i => val.indexOf(i.eng) >= 0)//挑选被选中的对象
this.key = this.key + 1//为了保证table 每次都会重渲,这样做体验感更好,如果不为table设置key值的话,用户一旦选中了复选框选项,就是在原来table基础上添加删除每一列,页面就有跳动的感觉,体验感不好
}
},
checkList里面是:
只包含eng的值,所以要对tradeSelections进行过滤,找到被选中的对象,push到即将被循环的数组里面。
还没明白的,自己可以动手试一试。
这样就实现了此功能。如有更好的办法,欢迎探讨!
参考文章:https://blog.csdn.net/qq_36410795/article/details/89920379