(js)勾选表格后，将表头和内容转为Form表单形式，下拉选项为表格每列对应数据且去重，赋值后和其字段相对应

(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

https://blog.csdn.net/m0_50981596/article/details/123596868