最近在开发公司后台系统中,发现有大量的表格,这里用的是element ui的表格,每次都要大量的的html, 如果可以通过js配置就最好不过了。
开始干活: (组件封装, 支持element中的所有属性,以及事件)
<template>
<div id="BasicTable">
<el-table
ref="table"
v-bind="bindTableOptions"
:data="bindTableOptions && bindTableOptions.data"
style="width: 100%"
v-on="$listeners"
>
<template v-for="item in bindTableOptions && bindTableOptions.columns">
<el-table-column
v-if="item.customSlot"
v-bind="item"
:min-width="item.minWidth || 200"
:key="item.id"
>
<template slot-scope="scope">
<slot
:name="item.customSlot"
v-bind:scope="scope"
v-bind:column="item"
>
</slot>
</template>
</el-table-column>
<el-table-column v-else v-bind="item" :min-width="item.minWidth || 200">
</el-table-column>
</template>
<template v-if="bindTableOptions && bindTableOptions.actionOptions">
<el-table-column
:min-width="bindTableOptions.actionOptions.minWidth || 200"
v-bind="bindTableOptions.actionOptions"
>
<template slot-scope="scope">
<template
v-for="(btn, index) in bindTableOptions.actionOptions.columns"
>
<el-button
v-if="(btn.hide && !btn.hide(scope.row)) || !btn.hide"
:key="index"
v-bind="btn"
:style="btn.style"
@click="handleClickAction(btn.event, scope, btn)"
>
{{ btn.text }}
</el-button>
</template>
</template>
</el-table-column>
</template>
</el-table>
<div
class="page_box"
v-if="bindTableOptions && bindTableOptions.showPagination"
>
<el-pagination
v-bind="bindTableOptions && bindTableOptions.paginationOp"
v-on="$listeners"
ref="pagination"
>
</el-pagination>
</div>
</div>
</template>
<script>
export default {
name: "BasicTable",
data() {
return {
// 分页配置
paginationOp: {
background: true,
layout: "prev, pager, next",
total: 10,
},
// 是否显示分页
showPagination: false,
};
},
computed: {
bindTableOptions() {
// console.log(this.$attrs, 1200);
return {
paginationOp: this.paginationOp,
showPagination: this.showPagination,
...this.$attrs,
};
},
},
methods: {
// 获取分页器实例
getPaginationRef() {
if (this.$refs.pagination) {
return this.$refs.pagination;
}
},
// 获取表格实例
getTableRef() {
if (this.$refs.table) {
return this.$refs.table;
}
},
// 分页器事件派发
hanldePageAction(type, data) {
this.$emit(type, data);
},
// 点击操作栏
handleClickAction(type, scope, btn) {
this.$emit(type, { scope, btn });
},
},
};
</script>
<style lang="scss" scoped>
.page_box {
margin-top: 20px;
}
</style>
页面使用: (导入组件)
根据自己的项目导入封装的table组件
页面使用:
js配置:
export const tableColumns = [
{
prop: "id",
label: "ID"
},
{
prop: "uid",
label: "用户"
},
{
prop: "u_headimg",
label: "发起者用户头像",
align: "center",
customSlot: 'portrait'
},
{
prop: "type",
label: "支付类型",
align: "center",
formatter: row => {
const user_status = row.type;
if (user_status == 1) {
return "支付宝";
} else if (user_status == 2) {
return "微信";
} else if (user_status == 3) {
return "苹果";
}
}
},
},
{
prop: "created_at",
label: "提交时间",
align: "center"
}
];
// 表格操作
export const actionColumns = [
{
text: "确认支付",
event: "pay",
size: "mini",
type: "danger",
hide: row => {
return row.status == 1;
}
},
{
text: "已支付",
size: "mini",
event: "none",
type: "info",
hide: row => {
return row.status == 0;
}
}
];
// 表格操作栏
export const actionOptions = {
prop: "",
label: "操作",
columns: actionColumns,
fixed: "right",
align: "center"
};
配置说明:
tableColumns: 就是对应的columns数组, 支持element table中的所有配置。
自定义节点的话,通过customSlot来定义插槽。
然后通过作用域插槽获取slot-scope=“{ scope }“每条数据,不要忘记花括号, 还支持获取当前列的配置,通过slot-scope=”{ column}”,具体可见组件的封装的源码
actionColumns: 表格操作的columns 数组 (event 是定义事件的名称,使用的时候需要在组件中通过@event 监听)
actionOptions: 表格的操作配置(适用有操作的表格)
element 的事件监听, 直接在组件中绑定就行了。例如:
以上就是我在公司业务的table组件的二次封装了,写的不是很全面,但已经够用了,以后有具体再优化。