使用vue2

### 表格组件的安装与引入 在 Vue 2 中，常用的表格组件是 **Element UI** 的 `el-table`。它是一个功能丰富、样式美观的组件库，适合企业级后台管理系统使用。可以通过以下命令安装 Element UI： ```bash npm install element-ui --save ``` 然后在项目入口文件（如 `main.js`）中全局引入： ```javascript import Vue from 'vue'; import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; Vue.use(ElementUI); ``` 也可以按需引入，以减少打包体积[^1]。 --- ### 基本使用方法 在 Vue 2 的单文件组件中，可以直接使用 `<el-table>` 标签来创建一个表格，并通过 `<el-table-column>` 定义列信息。每个列可以绑定字段名、设置标题、对齐方式等属性。 示例代码如下： ```vue <template> <el-table :data="tableData" border style="width: 100%"> <el-table-column prop="date" label="日期" width="150"></el-table-column> <el-table-column prop="name" label="姓名" width="120"></el-table-column> <el-table-column prop="age" label="年龄" width="120"></el-table-column> <el-table-column prop="address" label="地址"></el-table-column> </el-table-column> </el-table> </template> <script> export default { data() { return { tableData: [ { date: '2023-01-01', name: '张三', age: 28, address: '北京市' }, { date: '2023-01-02', name: '李四', age: 32, address: '上海市' } ] }; } }; </script> ``` 上述代码定义了一个包含“日期”、“姓名”、“年龄”和“地址”四个字段的表格。`:data` 属性用于绑定表格数据源，`prop` 指定对应的数据字段名[^1]。 --- ### 表格属性详解 `el-table` 提供了丰富的属性，用于控制表格的行为和外观： - `data`：表格数据源，通常是一个数组对象。 - `height`：设置表格高度，若未设置则自适应内容。 - `max-height`：设置表格最大高度，超出时显示滚动条。 - `stripe`：是否为斑马纹表格，默认为 `false`。 - `border`：是否显示边框，默认为 `false`。 - `size`：表格行的大小，可选值为 `medium`、`small`、`mini`。 - `default-sort`：默认排序规则，格式为 `{ prop: '字段名', order: 'ascending/descending' }`。 - `highlight-current-row`：是否高亮当前行，默认为 `true`。 例如，设置表格高度并启用斑马纹效果： ```vue <el-table :data="tableData" height="300" stripe border> <!-- 列定义 --> </el-table> ``` 这些属性可以在实际开发中根据需求灵活配置[^1]。 --- ### 表格事件与方法 `el-table` 组件也支持多种事件，用于监听用户交互行为： - `@row-click`：点击某一行时触发，参数为该行数据。 - `@sort-change`：当排序发生变化时触发，参数包含排序字段和顺序。 - `@selection-change`：当用户勾选多选列时触发，参数为选中的行数据数组。 - `@cell-click`：点击某个单元格时触发，参数为该单元格所在的行数据、列信息和事件。 示例代码如下： ```vue <el-table :data="tableData" @row-click="handleRowClick"> <!-- 列定义 --> </el-table> <script> export default { methods: { handleRowClick(row) { console.log('点击的行数据:', row); } } }; </script> ``` 此外，`el-table` 还提供了一些常用的方法，例如： - `clearSelection()`：清空所有选中行。 - `toggleRowSelection(row, selected)`：切换某一行的选中状态。 - `setCurrentRow(row)`：设置某行为当前高亮行。 这些方法可以通过 `ref` 调用： ```vue <el-table ref="myTable" :data="tableData"></el-table> <script> export default { methods: { clearSelection() { this.$refs.myTable.clearSelection(); } } }; </script> ``` --- ### 分页与数据转换封装 在处理大数据量时，通常需要结合分页功能。可以通过 `el-pagination` 组件实现分页控件，并结合 `el-table` 实现数据展示。例如： ```vue <template> <div> <el-table :data="tableData"> <!-- 列定义 --> </el-table> <el-pagination layout="prev, pager, next" :total="total" @current-change="handlePageChange" ></el-pagination> </div> </template> <script> export default { data() { return { tableData: [], total: 0, currentPage: 1 }; }, methods: { fetchData(page) { // 模拟请求接口获取数据 this.service.get('/api/data', { params: { page } }).then(res => { if (res.data.status === 200) { this.tableData = res.data.data; this.total = res.data.total; } }); }, handlePageChange(page) { this.currentPage = page; this.fetchData(page); } } }; </script> ``` 为了提高复用性，可以将数据获取和转换逻辑封装到一个工具函数中。例如，将布尔值转换为“是”或“否”的文本表示： ```javascript export function getTableData(root, url, params, arr) { root.service.get(url, { params: params || {} }).then(res => { if (res.data.status === 200) { root.tableData = res.data.data; root.total = res.data.total; root.tableData.map(item => { arr.map(aItem => { item[aItem] ? (item[aItem + '_text'] = '是') : (item[aItem + '_text'] = '否'); }); }); root.loading = false; } }); } ``` 这样可以避免重复代码，提升开发效率[^3]。 --- ### 自定义列渲染与插槽 `el-table-column` 支持使用作用域插槽来自定义列的内容渲染。例如，可以定义一个操作列，包含编辑和删除按钮： ```vue <el-table-column label="操作" width="150"> <template slot-scope="scope"> <el-button size="small" @click="editRow(scope.row)">编辑</el-button> <el-button size="small" type="danger" @click="deleteRow(scope.row)">删除</el-button> </template> </el-table-column> ``` 其中，`slot-scope="scope"` 提供了当前行的数据上下文，可以通过 `scope.row` 获取该行数据。 --- ### 总结 在 Vue 2 中，使用 Element UI 的 `el-table` 可以快速构建功能完善的表格组件。它提供了丰富的属性、事件和方法，支持分页、排序、筛选等功能，并且可以通过插槽机制实现高度定制化。结合数据转换封装和分页组件，能够有效提升开发效率和用户体验。