el-tabel（默认多选，数值改变，多选）

我自己项目中用到的，仅做参考，与君共勉

 

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];

}

}

}

}

},

 

 

 

}