vue实现checkbox点击选择控制element-ui table表单动态列展示与隐藏
要实现的效果:实现的代码:首先是数据准备:复选框数据:const tradeSelections = [{eng:'tradetype', name:"交易类型"},{eng:'ordertype', name:"下单类型"},{eng:'dealnum', name:"成交数量"},{eng:'dealprice', name:"成交价"},{eng:'dealline', name:"成交额"
·
要实现的效果:
实现的代码:
首先是数据准备:
复选框数据:
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,
};
},
渲染数据:
//复选框
<div class="checkbox_group">
<el-checkbox-group v-model="checkList" @change="changeOptions">
<el-checkbox
v-for="(item, index) in tradeSelections"
:label="item.eng"
:key="index"
>{{item.name}}</el-checkbox>
</el-checkbox-group>
</div>
//table表格
<el-table
:key="key"
:data="tableData"
highlight-current-row
style="width: 100%"
>
<el-table-column property="date" label="委托日期"> </el-table-column>
<el-table-column property="time" label="时间"> </el-table-column>
<el-table-column property="city" label="标的"> </el-table-column>
<el-table-column v-for="(item,index) in formThead" :key="index" :label="item.name">
<template slot-scope="scope">
{{ scope.row[item.eng] }}
</template>
</el-table-column>
</el-table>
对复选框进行监控:
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
更多推荐
已为社区贡献28条内容
所有评论(0)