淘宝网站建设退款,做购物网站 国外服务器,网站自动生成,代刷网站是怎么做的文章目录 一、el-table介绍二、el-table单选三、el-table多选四、el-table跨页勾选五、热门文章 一、el-table介绍
el-table 是 Element UI#xff08;一个基于 Vue.js 的高质量 UI 组件库#xff09;中的一个组件#xff0c;用于展示表格数据。通过 el-table#xff0c;你… 文章目录 一、el-table介绍二、el-table单选三、el-table多选四、el-table跨页勾选五、热门文章 一、el-table介绍
el-table 是 Element UI一个基于 Vue.js 的高质量 UI 组件库中的一个组件用于展示表格数据。通过 el-table你可以很方便地创建具有多种功能如排序、筛选、分页等的表格。
el-table 使用示例
templateel-table:datatableDatastylewidth: 100%el-table-columnpropdatelabel日期width180/el-table-columnel-table-columnpropnamelabel姓名width180/el-table-columnel-table-columnpropaddresslabel地址/el-table-column/el-table
/templatescript
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事件来管理选中时触发的事件它会传入currentRowoldCurrentRow。如果需要显示索引可以增加一列el-table-column设置type属性为index即可显示从 1 开始的索引号。
templateel-tablerefsingleTable:datatableDatahighlight-current-rowcurrent-changehandleCurrentChangestylewidth: 100%el-table-columntypeindexwidth50/el-table-columnel-table-columnpropertydatelabel日期width120/el-table-columnel-table-columnpropertynamelabel姓名width120/el-table-columnel-table-columnpropertyaddresslabel地址/el-table-column/el-tablediv stylemargin-top: 20pxel-button clicksetCurrent(tableData[1])选中第二行/el-buttonel-button clicksetCurrent()取消选择/el-button/div
/templatescriptexport 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 组件中实现列表勾选选择即多选功能你需要使用 typeselection 的 el-table-column并且监听 selection-change 事件。但如果你希望用户能够明确地选择多行而不是单选你通常不需要做任何特殊设置因为 typeselection 默认就是用于多选的。
el-table 列表勾选选择的示例
templateel-table:datatableDatastylewidth: 100%selection-changehandleSelectionChangeel-table-columntypeselectionwidth55/el-table-columnel-table-columnpropdatelabel日期width180/el-table-columnel-table-columnpropnamelabel姓名width180/el-table-columnel-table-columnpropaddresslabel地址/el-table-column/el-table
/templatescript
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-changehandleSelectionChange 监听选择变化事件并将选中的行数据数组作为参数传递给 handleSelectionChange 方法。handleSelectionChange 方法接收一个数组 val它包含了所有当前被勾选选中的行数据。multipleSelection 数据属性用于在组件内部存储当前选中的行数据但这并不是必须的你可以根据需要在 handleSelectionChange 方法中直接处理这些数据。
四、el-table跨页勾选
在 Element UI 的 el-table 组件中实现跨页勾选功能需要确保在分页时能够保留之前页面的选择状态。这通常涉及到在表格组件上设置一些特定的属性和监听事件并结合后端分页接口的数据处理。
以下是实现 el-table 跨页勾选功能的基本步骤
添加 row-key 属性在 el-table 上设置 row-key 属性该属性用于指定表格中每一行的唯一标识符通常可以是行数据的某个唯一字段如 ID。
el-table :row-keygetRowKey ......
/el-table在 Vue 实例的 methods 中定义 getRowKey 方法
methods: {getRowKey(row) {return row.id; // 假设每行数据都有一个唯一的 id 字段}
}设置 reserve-selection 属性在 el-table-column 的 typeselection 上设置 reserve-selection 属性为 true这将使得在分页时能够保留之前的选择状态。
el-table-column typeselection reserve-selection ...
/el-table-column处理分页数据确保后端分页接口返回的数据包含之前页面选中行的状态信息。这通常需要在后端进行实现使得在每次请求新的分页数据时后端能够知道哪些行是之前被选中的。监听 selection-change 事件在 el-table 上监听 selection-change 事件并在事件处理函数中更新当前选中的行数据。这通常用于在前端维护一个表示当前选中行数据的数组。
el-table ... selection-changehandleSelectionChange...
/el-table在 Vue 实例的 methods 中定义 handleSelectionChange 方法
methods: {handleSelectionChange(val) {this.multipleSelection val; // 更新当前选中的行数据数组// 可以在这里进行其他操作如向后端发送更新选中状态的请求等}
}注意事项
如果后端分页接口不支持跨页勾选功能你可能需要在前端自行实现一种机制来跟踪和保存选中状态。例如可以使用浏览器的 localStorage 或 Vuex 等状态管理库来保存选中状态。当用户切换页面或进行其他可能改变表格数据的行为时需要确保之前的选择状态被正确地保留和恢复。这可能需要你在 Vue 组件的生命周期钩子如 created、mounted、updated 等中进行一些额外的处理。
完整代码
template div el-pagination current-changehandlePageChange :current-pagecurrentPage :page-sizepageSize layoutprev, pager, next :totaltotalItems /el-pagination el-table :datatableData stylewidth: 100% selection-changehandleSelectionChange row-keyid el-table-column typeselection reserve-selection /el-table-column el-table-column propdate label日期 width180 /el-table-column el-table-column propname label姓名 width180 /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五、热门文章
【温故而知新】vue运用之探讨下单页面应用SPA与多页面应用MPA【温故而知新】探讨下对vue的mixin的理解【温故而知新】vue修饰符有哪些【温故而知新】vue组件间通信的实现方式draggable实现拖拽、禁止拖拽、拖拽后元素重新排序到指定位置router路由按需加载vue页面导出Word文档含图片Vue拖拽组件awe-dndel-tabs事件绑定Element UI
