我自己项目中用到的,仅做参考,与君共勉
vue代码部分(写在dialog里的):
<el-dialog title="选择配件" :visible.sync="dialogCheckAccessories" width="45%">
<el-table ref="multipleTable" :data="list" tooltip-effect="dark" @selection-change="handleSelectionChange" >
<el-table-column type="selection" width="55" align='center'>
</el-table-column>
<el-table-column label="配件名称" prop="mountingName" align='center'>
</el-table-column>
<el-table-column prop="mountingModel" label="配件型号" align='center'>
</el-table-column>
<el-table-column prop="manufacturer" label="生产厂家" align='center'>
</el-table-column>
<el-table-column label="数量" align='center' width="200">
<template slot-scope="scope">
<el-input-number size="small" :min="0" :max="10" v-model="scope.row.number" @change="changeNumber(scope.row)"></el-input-number>
</template>
</el-table-column>
</el-table>
<div slot="footer" class="dialog-footer">
<el-button size="small" @click="dialogCheckAccessories = false">取 消</el-button>
<el-button size="small" type="danger" @click="checkAccessoriesOK">确 定</el-button>
</div>
</el-dialog>
js代码部分:
首先监听弹框的打开和关闭不然this.toggleSelection方法中的 toggleRowSelection(vue自带的方法)会报错
watch: {
//弹框打开的时候默认选中的项目
dialogCheckAccessories(val) {
if (val) {
setTimeout(()=>{
this.toggleSelection(this.editEquipmentInfo.ssAccessories)
},100)
}
},
methods:{
// 多选
toggleSelection(rows) {
console.log(rows)
if (rows) {
rows.forEach(row => {
this.$refs.multipleTable.toggleRowSelection(row);
});
}
},
// 选择配件选取的数据
handleSelectionChange(val) {
if(val instanceof Array){
let obj = {}
val.forEach(item => {
obj[item.mountingId] = item.mountingName + "*" + item.number
});
this.equipmentAccessories = obj
}
},
// 改变数量后改变json数据
changeNumber(row){
for(var key in this.equipmentAccessories){
if (row.mountingId == key) {
this.equipmentAccessories[key] = row.mountingName + "*" + row.number
}
}
},
checkAccessoriesOK() {
console.log('添加设备ok', this.equipmentAccessories);
},
// 数据过滤 (已有数据和所有数据对比,剔除已有数据,将剩下来的和已有的组成新的数据,默认选中已有的数据)
mapFilter() {
if (this.editEquipmentInfo.ssAccessories != null) {
var arrSelect = this.editEquipmentInfo.ssAccessories;
this.list = [...this.ssAccessoriesList]
for (var i in this.list) {
for (var j in arrSelect) {
if (this.list[i].mountingId == arrSelect[j].mountingId) {
this.list[i] = arrSelect[j];
}
}
}
}
},
}