element ui表格多选功能将选中的每条数据添加到新的数组,然后被选中过的数据多选按钮置灰
时间: 2024-02-16 15:04:50 浏览: 68
对于element ui表格的多选功能,你可以通过监听selection-change事件来获取选中的数据,然后将其添加到一个新的数组中。
例如:
```html
<template>
<div>
<el-table :data="tableData" @selection-change="handleSelectionChange">
<el-table-column type="selection"></el-table-column>
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="age" label="年龄"></el-table-column>
</el-table>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [{
name: '张三',
age: 18
}, {
name: '李四',
age: 20
}, {
name: '王五',
age: 22
}],
selectedData: []
}
},
methods: {
handleSelectionChange(selection) {
this.selectedData = selection
}
}
}
</script>
```
在上面的例子中,我们定义了一个变量selectedData来存储选中的数据,然后在handleSelectionChange方法中将选中的数据赋值给selectedData。
至于如何将已选中的数据的多选按钮置灰,可以通过在表格的列定义中加入一个selection slot,通过判断当前行数据是否在已选中的数据中,来动态修改多选按钮的状态。
例如:
```html
<template>
<div>
<el-table :data="tableData" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55">
<template slot-scope="{row}">
<el-checkbox
v-model="selectedData"
:label="row"
:disabled="isDisabled(row)">
</el-checkbox>
</template>
</el-table-column>
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="age" label="年龄"></el-table-column>
</el-table>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [{
name: '张三',
age: 18
}, {
name: '李四',
age: 20
}, {
name: '王五',
age: 22
}],
selectedData: []
}
},
methods: {
handleSelectionChange(selection) {
this.selectedData = selection
},
isDisabled(row) {
return this.selectedData.includes(row)
}
}
}
</script>
```
在上面的例子中,我们定义了一个isDisabled方法来判断当前行数据是否在已选中的数据中,如果是,则将多选按钮置灰。这里我们使用了Array的includes方法来判断一个元素是否包含在一个数组中。
阅读全文