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

Z时代
2024-01-10
分类：技术分享

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

<Modal v-model="modal" width="50%" :mask-closable="false" @on-cancel="cancel">
<Card v-show="card1" :bordered="false" :dis-hover="true">
<Row>
<div>
<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) {
});
},}