首先要实现的功能是点击输入框弹出一个Poptip气泡提示框可以选择Table表格左边的单选按钮获取右边项目的所有多选框的值赋值到Input输入框内。
接着难点的就是实现table开启可选择后的列是多选，通过render改写为点选按钮,这里定义了一个checkID默认为null 点击后把ID赋给checkID，实现单选功能。
{
title: "选项",
width: 64,
align: "center",
render: (h, params) => {
let id = params.row.id
let radio = false
if(this.checkID === id){
radio = true;
}else {
radio = false;
}
return h("Radio", {
props: {
value:radio
},
on: {
"input": () =>{
this.checkID = id;
},
"on-change": (val) => {
if(this.checkID === id){
params.row.objectChange = params.row.object.split("，");
this.jcxmChange(params.row.objectChange)
}
// console.log(params.row.objectChange);
},
},
});
},
},
然后是必检项目这块左边选中后，右边默认全选，左边取消，右边全选也取消也不可选中,这个过程需要监听checkID的变化，拿到变化前后的ID改变必检项目的全选状态。
{
title: "必检项目",
key: "object",
align: "center",
render: (h, params) => {
let obj = params.row.object.split("，");
let array = [];
obj.forEach((item, index, arr) => {
array.push(h("Checkbox", { props: { label: item, disabled: this.checkID === params.row.id ? false : true } }));
});
return h(
"CheckboxGroup",
{
props: { value: params.row.objectChange },
on: {
"on-change": (val) => {
params.row.objectChange = val;
this.jcxmChange(params.row.objectChange)
},
},
},
array
);
},
},
watch: {
'checkID' :{
handler(newValue,oldValue){
for(let item of this.leftData){
if(item.id === oldValue){
item.objectChange = []
}
if(item.id === newValue)[
item.objectChange = item.object.split("，")
]
}
}
}
},
表格的数据格式如下
leftData: [
{
id: 1,
number: "A",
type: "校服产品",
object:
"水洗，撞白，干湿擦，耐水渍，耐汗渍，耐日晒，耐光汗复合，PH，甲醛，起毛起球，顶破强力，缩水（共12项）",
objectChange: [],
},
{
id: 2,
number: "B",
type: "高牢固产品",
object: "水洗，撞白，干湿擦，升华",
objectChange: [],
},
{
id: 3,
number: "C",
type: "物理检测",
object: "纱支，强力，捻度，条干，含水（共5项）",
objectChange: [],
},
{
id: 4,
number: "D",
type: "化学检测",
object:
"水洗，撞白，干湿擦，耐水渍，耐汗渍，耐日晒，耐光汗复合，PH，甲醛，起毛起球，顶破强力，缩水，升华，黄变，勾丝（共15项）",
objectChange: [],
},
], //左边下拉自定义表格选择
好了，这就是我实现的效果，感觉代码还可以在优化，有思路的大佬可以提供一下想法。