el-table-column多选和选中对比
时间: 2023-10-24 11:59:55 浏览: 90
el-table-column 是 Element UI 中的表格列组件,而多选和选中是两个不同的属性。
多选是指在表格中可以同时选择多行数据,可以通过设置 el-table 的属性 `selectable` 为 true 来启用多选,同时需要设置 el-table-column 的属性 `type` 为 'selection',这样就能实现多选的功能。
选中是指在表格中选中一行数据,通常用于展示详情或编辑数据。可以通过设置 el-table 的属性 `highlight-current-row` 为 true 来启用选中,同时需要设置 el-table-column 的属性 `type` 为 'index',这样就能实现选中的功能。
需要注意的是,多选和选中可以同时存在于一个表格中,但是需要分别设置不同的 el-table-column。并且多选和选中的效果也是不同的,多选会在每一行数据前面显示一个复选框,选中则会在整行数据上加上一个高亮效果。
相关问题
el-table-column多选
要在 Element UI 的 el-table 中使用多选功能,需要使用 el-table-column 组件,同时设置 type 为 selection。以下是示例代码:
```
<template>
<el-table :data="tableData" style="width: 100%">
<el-table-column type="selection" width="55"></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>
<script>
export default {
data() {
return {
tableData: [
{ name: '张三', age: 25, address: '北京市海淀区' },
{ name: '李四', age: 30, address: '上海市浦东新区' },
{ name: '王五', age: 28, address: '广州市天河区' }
]
}
}
}
</script>
```
在上述代码中,el-table-column 组件的 type 属性设置为 selection,表示这一列是多选框列。el-table-column 组件的 prop 属性表示数据源的字段名,label 属性表示列的标题。tableData 数据源中每一项都应包含 name、age 和 address 字段。
这样,el-table 的多选功能就实现了。在用户勾选多选框后,可以通过 $refs 属性获取选中的行数据。例如:
```
<template>
<el-button type="primary" @click="handleSelection">获取选中项</el-button>
<br>
<br>
<el-table :data="tableData" ref="table" style="width: 100%">
<el-table-column type="selection" width="55"></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>
<script>
export default {
data() {
return {
tableData: [
{ name: '张三', age: 25, address: '北京市海淀区' },
{ name: '李四', age: 30, address: '上海市浦东新区' },
{ name: '王五', age: 28, address: '广州市天河区' }
]
}
},
methods: {
handleSelection() {
const selectedRows = this.$refs.table.selection
console.log(selectedRows)
}
}
}
</script>
```
在上述代码中,el-button 组件的点击事件绑定了 handleSelection 方法,该方法通过 $refs.table.selection 获取选中的行数据,并将其打印到控制台中。
el-table实现跨页多选
可以通过以下步骤实现el-table的跨页多选:
1. 在el-table中添加selection属性,用于存储选中的行数据。
2. 在el-table-column中添加type属性,设置为selection,用于显示复选框。
3. 在el-pagination中添加@current-change事件,用于监听分页器的页码变化。
4. 在@current-change事件中,判断当前页是否为第一页,如果是,则将选中的行数据存储到selection中;如果不是,则将选中的行数据追加到selection中。
5. 在el-table中添加@select-all事件,用于全选当前页的数据。
6. 在@select-all事件中,判断当前页是否为第一页,如果是,则将当前页的所有数据存储到selection中;如果不是,则将当前页的所有数据追加到selection中。
以下是示例代码:
```
<template>
<div>
<el-table :data="tableData" :row-key="row => row.id" @select-all="handleSelectAll">
<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>
<el-pagination :total="total" :page-size="pageSize" @current-change="handlePageChange"></el-pagination>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [],
selection: [],
total: 0,
pageSize: 10,
currentPage: 1
}
},
methods: {
handlePageChange(currentPage) {
if (currentPage === 1) {
this.selection = []
}
this.currentPage = currentPage
},
handleSelectAll(selection) {
if (this.currentPage === 1) {
this.selection = selection
} else {
this.selection = this.selection.concat(selection)
}
}
}
}
</script>
```
阅读全文