The problem of deselecting an item by the table component of iview

    table "" 

< template >

<Modal v-model="modal" width="50%" :mask-closable="false" @on-cancel="cancel">
  <Card v-show="card1" :bordered="false" :dis-hover="true">
    <Row>
      <div style="width:100%">
        <Table ref="table" highlight-row border :loading="loadingData" :columns="tables" :data="tableData"
               height="500"
               highlight-row="true" @on-select="checked"
               @on-selection-change="selectOne"></Table>
      </div>
    </Row>
  </Card>
</Modal>

< / div >
< / template >



methods: {
  init: function () {
    this.clickQuery();
    let _this = this;
    _this.tables = [{
      title: "",
      type: "index",
      align: "center",
      width: 60
    },
      {
        type: "selection",
        width: 60,
        align: "center",
      },
      {
        title: "",
        key: "action",
        width: 115,
        align: "center",
        render: (h, params) => {
          let unitData = this.unitData;
          const row = params.row;
          return h("Select", {
              on: {
                "on-change": (unitId) => {
                  row.unitId = unitId;
                  this.tableData[params.index] = row;
                },
                "on-open-change": () => {
                  this.getParameter(15, "getUnit");
                },
              }
            },
            unitData.map(function (item) {
              //selectoption
              return [h(
                "Option",
                {
                  props: {
                    value: item.id,
                    key: item.name
                  }
                }, item.name)]
            }));
        }
      },
      {
        title: "",
        key: "action",
        width: 130,
        align: "center",
        render: (h, params) => {
          let typeData = this.typeData;
          const row = params.row;
          return h("Select", {
              on: {
                "on-change": (goodsTypeId) => {
                  row.goodsTypeId = goodsTypeId;
                  this.tableData[params.index] = row;
                },
                "on-open-change": () => {
                  this.getParameter(9, "getType");
                },
              }
            },
            typeData.map(function (item) {
              //selectoption
              return [h(
                "Option",
                {
                  props: {
                    value: item.id,
                    key: item.name
                  }
                }, item.name)]
            }));
        }
      },
      {
        title: "",
        key: "action",
        width: 110,
        align: "center",
        render: (h, params) => {
          const row = params.row;
          return h("InputNumber", {
            props: {
              type: "success",
              size: "small",
              min: 0,
              value: 0
            },
            on: {
              "on-change": (prePurchaseNum) => {
                row.prePurchaseNum = prePurchaseNum;
                this.tableData[params.index] = row;
              }
            }
          }, row.goodsNum)
        }
      },
      {
        title: "",
        key: "action",
        width: 110,
        align: "center",
        render: (h, params) => {
          const row = params.row;
          return h("InputNumber", {
            props: {
              type: "success",
              size: "small",
              min: 0,
              value: 0,
            },
            on: {
              "on-change": (prePurchasePrice) => {
                row.prePurchasePrice = prePurchasePrice;
                this.tableData[params.index] = row;
              }
            }
          })
        }
      },
      {
        title: "",
        align: "center",
        width: 100,
        key: "colorName"
      }
    ]
  },
  // 
  selectOne: function (selection) {
    this.currentChecked.checkedData = selection;
  },
  // 
  checked: function (selection,row) {
    this.tableData[index]._disabled = false;
    console.log(this.tableData)

  },
  // 
  clickQuery: function () {
    let _this = this;
    this.currentChecked.checkedData = [];
    let formData = {
      pageNo: this.pageInfo.current,
      pageSize: this.pageInfo.size,
    };
    this.loadingData = true;
    ajax.post("/GoodsApi", formData, function (res) {
      let resultData = res.data;
      if (resultData.status === 200) {
        _this.tableData = resultData.obj;
        for (let i=0;i<_this.tableData.length;iPP) {
          _this.tableData[i]._disabled = true;
        }
      }
    }, function (error) {
    });
  },
}

}

clipboard.png

row._disable = false

clipboard.png

Dec.24,2021

that is to allow the selection function in the events triggered after input

clipboard.png

on-select selection

clipboard.png

data key _disabled: true

clipboard.png

Menu