iview 的table组件取消某一项选中状态的问题

Question

    如何获取table组件某一项的选则状态（并不是选中某一项后触发事件的方法），我想做一个 “在用户完成了某些数据输入后才可以点击选择的功能”

<template>
<div>

<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) {
              //默认情况下都为select中的option选项
              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) {
              //默认情况下都为select中的option选项
              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;i++) {
          _this.tableData[i]._disabled = true;
        }
      }
    }, function (error) {
    });
  },
}

}

改变了当前行row._disable = false 之后只有全选框发生了变化

Answer 1

那就是输入之后所触发的事件中把选择功能允许呗

on-select 触发的时候 不满足你条件就是不允许输入的时候 把selection集合清空

这不有介绍么

给 data 项设置特殊 key _disabled: true 可以禁止选择当前项。