一、el-table介绍
el-table 是 Element UI（一个基于 Vue.js 的高质量 UI 组件库）中的一个组件，用于展示表格数据。通过 el-table，你可以很方便地创建具有多种功能（如排序、筛选、分页等）的表格。
el-table 使用示例：
<template>
<el-table
:data="tableData"
style="width: 100%">
<el-table-column
prop="date"
label="日期"
width="180">
</el-table-column>
<el-table-column
prop="name"
label="姓名"
width="180">
</el-table-column>
<el-table-column
prop="address"
label="地址">
</el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小狮',
address: '上海市普陀区金沙江路 1517 弄'
}, {
// ...其他数据
}]
}
}
}
</script>
在上面的示例中：
el-table是表格的根组件，通过:data属性绑定要展示的数据（这里是一个数组）。el-table-column是表格列的组件，用于定义表格的每一列。prop属性指定了每一列对应的数据字段。label属性指定了列的标题。width属性（可选）用于指定列的宽度。
Element UI 的 el-table 组件提供了许多其他的功能和配置选项，如分页、排序、筛选、行展开、自定义模板等，你可以根据需要进一步了解和使用它们。
二、el-table单选
Table 组件提供了单选的支持，只需要配置highlight-current-row属性即可实现单选。之后由current-change事件来管理选中时触发的事件，它会传入currentRow，oldCurrentRow。如果需要显示索引，可以增加一列el-table-column，设置type属性为index即可显示从 1 开始的索引号。
<template>
<el-table
ref="singleTable"
:data="tableData"
highlight-current-row
@current-change="handleCurrentChange"
style="width: 100%">
<el-table-column
type="index"
width="50">
</el-table-column>
<el-table-column
property="date"
label="日期"
width="120">
</el-table-column>
<el-table-column
property="name"
label="姓名"
width="120">
</el-table-column>
<el-table-column
property="address"
label="地址">
</el-table-column>
</el-table>
<div style="margin-top: 20px">
<el-button @click="setCurrent(tableData[1])">选中第二行</el-button>
<el-button @click="setCurrent()">取消选择</el-button>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
}, {
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
}],
currentRow: null
}
},
methods: {
setCurrent(row) {
this.$refs.singleTable.setCurrentRow(row);
},
handleCurrentChange(val) {
this.currentRow = val;
}
}
}
</script>
三、el-table多选
在 Element UI 的 el-table 组件中实现列表勾选选择（即多选功能），你需要使用 type="selection" 的 el-table-column，并且监听 selection-change 事件。但如果你希望用户能够明确地选择多行（而不是单选），你通常不需要做任何特殊设置，因为 type="selection" 默认就是用于多选的。
el-table 列表勾选选择的示例：
<template>
<el-table
:data="tableData"
style="width: 100%"
@selection-change="handleSelectionChange"
>
<el-table-column
type="selection"
width="55"
></el-table-column>
<el-table-column
prop="date"
label="日期"
width="180"
></el-table-column>
<el-table-column
prop="name"
label="姓名"
width="180"
></el-table-column>
<el-table-column
prop="address"
label="地址"
></el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [
{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
},
{
date: '2016-05-04',
name: '王小狮',
address: '上海市普陀区金沙江路 1517 弄'
},
// ...其他数据
],
multipleSelection: [] // 用于存储选中行的数组
};
},
methods: {
handleSelectionChange(val) {
// val 是一个包含选中行数据的数组
this.multipleSelection = val;
console.log('当前选中项', val);
}
}
};
</script>
在这个示例中：
el-table-column的type属性设置为"selection"来启用勾选选择。@selection-change="handleSelectionChange"监听选择变化事件，并将选中的行数据数组作为参数传递给handleSelectionChange方法。handleSelectionChange方法接收一个数组val，它包含了所有当前被勾选（选中）的行数据。multipleSelection数据属性用于在组件内部存储当前选中的行数据，但这并不是必须的，你可以根据需要在handleSelectionChange方法中直接处理这些数据。
四、el-table跨页勾选
在 Element UI 的 el-table 组件中实现跨页勾选功能，需要确保在分页时能够保留之前页面的选择状态。这通常涉及到在表格组件上设置一些特定的属性和监听事件，并结合后端分页接口的数据处理。
以下是实现 el-table 跨页勾选功能的基本步骤：
- 添加
row-key属性：在el-table上设置row-key属性，该属性用于指定表格中每一行的唯一标识符，通常可以是行数据的某个唯一字段（如 ID）。
<el-table :row-key="getRowKey" ...>
...
</el-table>
在 Vue 实例的 methods 中定义 getRowKey 方法：
methods: {
getRowKey(row) {
return row.id; // 假设每行数据都有一个唯一的 id 字段
}
}
- 设置
reserve-selection属性：在el-table-column的type="selection"上设置reserve-selection属性为true，这将使得在分页时能够保留之前的选择状态。
<el-table-column type="selection" reserve-selection ...>
</el-table-column>
- 处理分页数据：确保后端分页接口返回的数据包含之前页面选中行的状态信息。这通常需要在后端进行实现，使得在每次请求新的分页数据时，后端能够知道哪些行是之前被选中的。
- 监听
selection-change事件：在el-table上监听selection-change事件，并在事件处理函数中更新当前选中的行数据。这通常用于在前端维护一个表示当前选中行数据的数组。
<el-table ... @selection-change="handleSelectionChange">
...
</el-table>
在 Vue 实例的 methods 中定义 handleSelectionChange 方法：
methods: {
handleSelectionChange(val) {
this.multipleSelection = val; // 更新当前选中的行数据数组
// 可以在这里进行其他操作，如向后端发送更新选中状态的请求等
}
}
- 注意事项：
- 如果后端分页接口不支持跨页勾选功能，你可能需要在前端自行实现一种机制来跟踪和保存选中状态。例如，可以使用浏览器的 localStorage 或 Vuex 等状态管理库来保存选中状态。
- 当用户切换页面或进行其他可能改变表格数据的行为时，需要确保之前的选择状态被正确地保留和恢复。这可能需要你在 Vue 组件的生命周期钩子（如
created、mounted、updated等）中进行一些额外的处理。
完整代码
<template>
<div>
<el-pagination
@current-change="handlePageChange"
:current-page="currentPage"
:page-size="pageSize"
layout="prev, pager, next"
:total="totalItems"
></el-pagination>
<el-table
:data="tableData"
style="width: 100%"
@selection-change="handleSelectionChange"
row-key="id"
>
<el-table-column
type="selection"
reserve-selection
></el-table-column>
<el-table-column
prop="date"
label="日期"
width="180"
></el-table-column>
<el-table-column
prop="name"
label="姓名"
width="180"
></el-table-column>
<!-- 其他列 -->
</el-table>
</div>
</template>
<script>
export default {
data() {
return {
currentPage: 1, // 当前页码
pageSize: 10, // 每页显示数量
totalItems: 0, // 总数据条数，从后端接口获取
tableData: [], // 当前页数据
selectedRows: [], // 所有选中的行数据，用于跨页保存状态
};
},
created() {
this.fetchData(); // 初始化时加载第一页数据
},
methods: {
// 加载数据的函数（需要调用后端接口）
fetchData() {
// 假设你有一个 fetchTableData 函数，用于从后端获取分页数据
// 这里需要传入当前页码和每页显示数量，并返回数据
// 同时，这个函数还需要处理后端返回的总数据条数 totalItems
this.fetchTableData(this.currentPage, this.pageSize)
.then(response => {
this.totalItems = response.total; // 更新总数据条数
this.tableData = response.data; // 更新当前页数据
// 如果后端支持跨页勾选，还需要处理 selectedRows
// 例如，从 response 中获取之前选中的行 ID，然后筛选出对应的行数据放入 selectedRows
})
.catch(error => {
// 处理错误
});
},
handlePageChange(val) {
this.currentPage = val;
this.fetchData(); // 切换页码时重新加载数据
},
handleSelectionChange(val) {
// val 是当前页选中的行数据数组
// 这里需要处理跨页选中的逻辑
// 你可以将 val 与 selectedRows 进行合并、去重等操作
// 并将最终的结果赋值给 selectedRows
this.selectedRows = val; // 简化的示例，实际中可能需要更复杂的逻辑
// 你还可以选择将 selectedRows 发送到后端进行保存（如果需要的话）
},
// 假设的 fetchTableData 函数（你需要根据后端接口来实现）
fetchTableData(page, size) {
// 发送请求到后端获取数据，并返回 Promise
},
},
};
</script>