6.记录Vue项目input输入框点击Poptip气泡实现复杂table 可选择按钮多选变单选

首先要实现的功能是点击输入框弹出一个Poptip气泡提示框可以选择Table表格左边的单选按钮获取右边项目的所有多选框的值赋值到Input输入框内。

           <FormItem label="检测项目">
              <Poptip v-model="visible" placement="bottom-start">
                <Input v-model="formItem.jcxm" type="textarea" :rows="4" placeholder="Enter something..."></Input>
                <div slot="content">
                  <Table border ref="selection" :columns="leftColumns" :data="leftData"></Table>
                  <div style="float:right;padding-top:10px">
                    <Button>取消</Button>
                    <Button type="warning" style="margin-left: 18px" @click="addType">自定义选项</Button>
                    <Button type="primary" style="margin-left: 18px">确定</Button>
                  </div>
                </div>
              </Poptip>
            </FormItem>

接着难点的就是实现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: [],
        },
      ], //左边下拉自定义表格选择

好了，这就是我实现的效果，感觉代码还可以在优化，有思路的大佬可以提供一下想法。