vue组件el-table

### Vue 中 el-table 的使用方法及示例 `el-table` 是 Element Plus 提供的一个表格组件，用于展示结构化数据并支持多种交互功能。以下是关于 `el-table` 的基本使用方法以及一些高级特性。 #### 基本用法 `el-table` 需要绑定一个数组作为其数据源，并通过列配置 (`el-table-column`) 来定义每一列的内容和样式。以下是一个简单的例子： ```html <template> <div> <el-table :data="tableData"> <el-table-column prop="date" label="日期"></el-table-column> <el-table-column prop="name" label="姓名"></el-table-column> <el-table-column prop="address" label="地址"></el-table-column> </el-table> </div> </template> <script> export default { data() { return { tableData: [ { date: '2016-05-03', name: 'Tom', address: 'No. 189, Grove St, Los Angeles' }, { date: '2016-05-02', name: 'John', address: 'New York No. 1 Lake Park' } ] }; } }; </script> ``` 上述代码展示了如何创建一个基础的表格[^1]。 --- #### 处理单元格中的复杂逻辑 如果需要对表格中的某些字段进行自定义处理，可以利用 `scope` 对象访问当前行的数据，并结合 `methods` 定义的方法实现动态计算或格式转换。 ```html <template> <div> <el-table :data="tableData"> <el-table-column label="金额(元)"> <template #default="scope"> {{ formatPrice(scope.row.price) }} </template> </el-table-column> </el-table> </div> </template> <script> export default { methods: { formatPrice(price) { return `￥${price.toFixed(2)}`; } }, data() { return { tableData: [{ price: 123.45 }] }; } }; </script> ``` 此部分说明了如何在模板中调用外部函数来修改显示内容。 --- #### 实现多选功能 为了使表格具备多选能力，需设置属性 `@selection-change` 并提供回调函数监听选择变化事件；同时可通过 `$refs` 调整某一行的选择状态。 ```html <template> <div> <el-table ref="multipleTable" :data="tableData" @selection-change="handleSelectionChange" style="width: 100%"> <el-table-column type="selection" width="55"></el-table-column> <el-table-column property="name" label="名称" width="120"></el-table-column> </el-table> <el-button @click="toggleSelection">取消全选</el-button> </div> </template> <script> export default { data() { return { tableData: [{ name: "Item A" }, { name: "Item B" }], multipleSelection: [] }; }, methods: { toggleSelection(rows) { if (!rows || rows.length === 0) { this.$refs.multipleTable.clearSelection(); } else { rows.forEach((row) => { this.$refs.multipleTable.toggleRowSelection(row); }); } }, handleSelectionChange(val) { this.multipleSelection = val; } } }; </script> ``` 这里实现了多选框的功能，并提供了清除已选项的操作[^2]。 --- #### 动态更新选中状态 当页面加载完成后或者接收到新的数据时，可能需要手动调整某些行的选中状态。这通常借助于 `this.$refs.multipleTable.toggleRowSelection()` 方法完成。 ```javascript // 找到对应的行对象并通过 ID 判断是否应该被选中 const row = this.tableData.find((item) => item.id === targetId); if (row && shouldSelect) { this.$nextTick(() => { this.$refs.multipleTable.toggleRowSelection(row, true); // 设置为选中 }); } ``` 该片段描述了一种场景下自动恢复之前保存过的选中记录的方式。 --- ### 总结 以上分别介绍了 `el-table` 的基础应用、单元格渲染扩展、多选操作及其动态管理等内容。这些技术可以帮助开发者更灵活地构建复杂的表格界面。