element-
ui 是一个非常流行的
Vue.js 组件库，其中包含了许多常用的
UI 组件，例如
表格、输入框等。针对
表格组件，我们可以封装一个 tableList 组件来简化我们在使用
element-
ui 表格组件时的代码编写。
首先，在 src/components 目录下创建 TableList.vue 文件，然后在该文件中编写如下代码：
```html
<
template>
<div>
<el-table :data="tableData" :row-key="rowKey" :height="height">
<!--
遍历 columns，自动生成列 -->
<el-table-column v-for="column in columns" :key="column.prop" :label="column.label" :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: () => [],
},
// 行标识符
rowKey: {
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: [
{ label: "姓名", prop: "name" },
{ label: "年龄", prop: "age" },
{ label: "性别", prop: "gender" },
{ label: "操作",
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 表格组件时的代码编写，提高我们的开发效率。
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
