element ui plus table 设置为多选
时间: 2023-06-28 09:16:25 浏览: 258
Element-ui 多选.md
要将 Element UI 中的 Table 组件设置为多选,需要在 `<el-table>` 标签中设置 `@selection-change` 和 `@select` 事件处理函数,并且在 `<el-table-column>` 标签中设置 `type="selection"`。具体代码如下:
```html
<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-column prop="address" label="地址"></el-table-column>
</el-table>
```
```javascript
export default {
data() {
return {
tableData: [
{
name: '张三',
age: 18,
address: '北京市朝阳区'
},
{
name: '李四',
age: 20,
address: '上海市浦东新区'
},
{
name: '王五',
age: 22,
address: '广州市天河区'
}
],
selectedRows: []
}
},
methods: {
handleSelectionChange(selectedRows) {
this.selectedRows = selectedRows
},
handleDeleteSelectedRows() {
// 删除选中的行
// ...
}
}
}
```
在上面的代码中,`@selection-change` 事件处理函数会在用户选择或取消选择某一行数据时触发,将选中的行数据保存在 `selectedRows` 变量中。`handleDeleteSelectedRows` 方法用于删除选中的行数据。
阅读全文