element-
ui 是
一个非常流行的 Vue.js 组件库，其中包含了许多常用的
UI 组件，例如
表格、输入框等。针对
表格组件，我们可以封装
一个 tableList 组件来简化我们在使用
element-
ui 表格组件
时的
代码编写。
首先，在 src/components 目录下创建
TableList.vue 文件，然后在该文件中编写如下
代码：
```html
<template>
<div>
<
el-
table :data="
tableData" :row-
key="row
Key" :height="height">
<!-- 遍历 columns，自动生成列 -->
<
el-
table-column v-for="column in columns" :
key="column.prop" :lab
el="column.lab
el" :prop="column.prop">
<!-- 自定义插槽 -->
<template v-if="column.slot" slot-scope="scope">
<slot :name="column.slot" v-bind="scope.row"></slot>
</template>
</
el-
table-column>
</
el-
table>
<!-- 分页组件 -->
<
el-pagination :current-page.sync="currentPage" :page-size="pageSize" :total="total" @current-change="handleCurrentChange"></
el-pagination>
</div>
</template>
<script>
export default {
name: "
TableList",
props: {
//
表格数据
tableData: {
type: Array,
default: () => [],
},
//
表格列
columns: {
type: Array,
default: () => [],
},
// 行标识符
row
Key: {
type: String,
default: "id",
},
//
表格高度
height: {
type: Number,
default: 0,
},
// 当前页码
currentPage: {
type: Number,
default: 1,
},
// 每页条数
pageSize: {
type: Number,
default: 10,
},
// 总条数
total: {
type: Number,
default: 0,
},
},
methods: {
// 分页回调函数
handleCurrentChange(val) {
this.$emit("pagination", val);
},
},
};
</script>
```
该组件的功能包括：
1. 自动遍历 columns 数组，生成
表格列。
2. 支持自定义插槽，例如用于
渲染操作按钮等。
3. 集成了
element-
ui 的分页组件，可以直接使用。
4. 父组件可以通过传递 props 来控制
表格数据、
表格列、行标识符、
表格高度、当前页码、每页条数和总条数。
5. 父组件可以通过
监听 pagination 事件来获取分页信息。
使用该组件
时，只
需要在父组件中引入
TableList 组件并传递必要的 props 即可，例如：
```html
<template>
<div>
<
table-list :
table-data="
tableData" :columns="
tableColumns" :total="total" @pagination="handlePagination"></
table-list>
</div>
</template>
<script>
import
TableList from "@/components/
TableList.vue";
export default {
name: "Example",
components: {
TableList,
},
data() {
return {
tableData: [],
tableColumns: [
{ lab
el: "姓名", prop: "name" },
{ lab
el: "年龄", prop: "age" },
{ lab
el: "性别", prop: "gender" },
{ lab
el: "操作", slot: "operations" },
],
total: 0,
currentPage: 1,
pageSize: 10,
};
},
methods: {
handlePagination(val) {
this.currentPage = val;
// 重新获取
数据
// ...
},
},
};
</script>
```
以上
代码中，我们通过传递
tableData、
tableColumns 和 total 等 props 来控制
TableList 组件的显示。同
时，
监听了 pagination 事件，当分页信息变化
时会触发 handlePagination 方法，我们在该方法中可以重新获取
数据并更新
表格显示。
这样，我们就可以通过封装
TableList 组件来简化我们在使用
element-
ui 表格组件
时的
代码编写，提高我们的开发效率。
3985
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
