(js)勾选表格后,将表头和内容转为Form表单形式,下拉选项为表格每列对应数据且去重,赋值后和其字段相对应
1.效果:
2.1 去掉选框的表头delColumns数据:
2.2 勾选的selectList数据:
2.3 对应添加新字段List后的delColumns数组:
3.1 右下角表单代码:
<Form ref="uploadForm" :model="uploadForm" :label-width="60">
<FormItem
:label="item.title"
v-for="(item, index) of delColumns"
:key="index"
>
<Select v-model="uploadForm[item.slot]" placeholder="请选择">
<Option v-for="(e, i) in item.List" :value="e" :key="i">{{
e
}}</Option>
</Select>
</FormItem>
</Form>
3.2 勾选后点击可视化按钮事件:
//执行可视化
showOption() {
//表单循环
this.delColumns = JSON.parse(JSON.stringify(this.colHidden)); //拷贝表格头部
this.delColumns.shift(); //去掉第一条选框
this.delColumns.forEach((item) => { //遍历新表头为对应列添加字段
let newA = []; //存放新数组
let newAA = []; //存放过滤后的数组
this.selectList.forEach((ele) => { //遍历表格选中的数据
let key = Object.keys(ele);
if ((key = item.slot)) {
newA.push(ele[key]); //判断对象里的属性是否和表头字段相同,若相同则将对应值push进新数组
newAA = new Set(newA);
}
});
this.$set(item, item.slot + "List", newAA); //给新表头每列添加新字段List值为和其对应的新数组
});
}
4. 表单填选后uploadForm对象
解决参考:https://blog.csdn.net/qq_37550440/article/details/119858873