elementui 表格多选
时间: 2023-07-24 08:26:24 浏览: 123
ElementUI 表格的多选功能可以通过使用 `el-table-column` 组件的 `type` 属性为 `selection` 来实现。具体步骤如下:
1. 在 `el-table` 组件中添加 `el-table-column` 组件,并将 `type` 属性设置为 `selection`。
```html
<template>
<el-table :data="tableData" style="width: 100%">
<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>
</template>
```
2. 在 `el-table` 组件中添加一个按钮,用于获取用户选择的行数据。
```html
<template>
<el-table :data="tableData" style="width: 100%">
<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>
<el-button @click="handleSelection">获取选中项</el-button>
</template>
```
3. 在组件的 `methods` 中定义 `handleSelection` 方法,用于获取用户选择的行数据。
```js
<script>
export default {
data() {
return {
tableData: [
{
name: '张三',
age: 18,
address: '北京市朝阳区'
},
{
name: '李四',
age: 22,
address: '上海市浦东新区'
},
{
name: '王五',
age: 25,
address: '广州市天河区'
}
],
selectedRows: [] // 用于保存用户选择的行数据
}
},
methods: {
handleSelection(rows) {
this.selectedRows = rows
console.log('用户选择的行数据:', this.selectedRows)
}
}
}
</script>
```
以上就是 ElementUI 表格多选的实现方式。当用户选择表格中的行时,`handleSelection` 方法会将用户选择的行数据保存在 `selectedRows` 变量中,并输出到控制台中。
阅读全文