element-plus 表格简单封装_element-plus封装表格

最近用element-plus写前端，发现表格、分页、检索等多组件都是分离的，每次都要自己去合并，所以根据应用场景自己封了一个小组件，直接上代码：

<template>
  <div class="oa-table-area">
    <el-table
        :data="tableShowData"
        style="width: 100%"
        :tableLayout="tableLayout"
    >
      <template v-for="column in columnName" :key="column.prop">
        <el-table-column  :prop="column.prop" :label="column.label"
                          :width="column.len"/>
      </template>
      <el-table-column label="操作" width="350" v-if="buttonConfig.show">
        <template v-slot="scope">
        <el-row >
          <template v-for="btn in buttonConfig.buttons" :key="btn.label">
            <el-col :span="8" v-if="btn.show(scope.row.releaseStatus)">
              <el-button
                         :icon="btn.icon"
                         :type="btn.type" @click="handle(scope.row, btn.method, btn.paramKey, btn.emitKey)"
              >{{ btn.label}}</el-button>
            </el-col>
          </template>

        </el-row>
        </template>
      </el-table-column>

    </el-table>
  </div>
  <el-row justify="center" style="top: 4px">
    <el-col :span="8" >
      <div class="grid-content bg-purple-dark"/>
      <el-pagination background
                     layout="sizes, prev, pager, next"
                     :total="total"
                     :page-size="pageSize"
                     v-model="currentPage"
                     :page-sizes="[10, 15, 20, 25, 30, 35, 40]"
                     @size-change="handleSizeChange"
                     @current-change="handleCurrentChange"
      />
    </el-col>
  </el-row>
</template>

<script>
import oaTable from "./oaTable"
export default oaTable
</script>

<style scoped>
.oa-table-area{
  width: 100%;
  height: 93% !important;
  overflow-y: auto;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57

import {ref, watch} from "vue";

export default {
    name: "OaTable",
    emits: ["browse", "edit", "delete", "seeStatus"],
    props: {
        tableData: Array,
        columnName: Array,
        buttonConfig: {
            show: Boolean,
            emitConfig: Boolean,
            buttons: Array
        }
    },
    setup(props, context) {
        const tableLayout = ref('fixed')
        const currentPage = ref(1)
        const total = ref(0)
        const pageSize = ref(15)
        const tableShowData = ref(null)
        watch(props, newValue => {
            total.value = props.tableData.length
            tableShowData.value = newValue.tableData.slice(pageSize.value * (currentPage.value - 1), pageSize.value * currentPage.value)
        }, {immediate: true, deep: true})

        watch(pageSize, newValue => {
            tableShowData.value = props.tableData.slice(newValue * (currentPage.value - 1), newValue * currentPage.value)
        }, {immediate: true})

        watch(currentPage, newValue => {
            tableShowData.value = props.tableData.slice(pageSize.value * (newValue - 1), pageSize.value * newValue)
        }, {immediate: true})

        const handleSizeChange = value => {
            pageSize.value = value
            //更换样式，从头显示
            currentPage.value = 1
        }
        const handleCurrentChange = value => {
            currentPage.value = value
        }
        /**
         * 方法处理
         * @param row
         * @param method
         * @param paramKey
         * @param emitKey
         */
        const handle = (row, method, paramKey, emitKey) => {
            if (props.buttonConfig.emitConfig === true) {
                if (emitKey == null && emitKey === undefined && emitKey === "") {
                    console.error("自定义方法关键字错误")
                    return null
                }
                const params = []
                if (paramKey !== null && paramKey !== undefined && paramKey.length > 0) {

                    for (let r in row) {
                        for (let p of paramKey) {
                            if (r === p) {
                                params.push(row[r])
                                break
                            }
                        }
                    }
                }
                if (method !== null && method !== undefined) {
                    if (params.length === 0) {
                        method()
                    } else {
                        method(...params)
                    }
                }
                context.emit(emitKey, params)
            } else {
                if (paramKey !== null && paramKey !== undefined && paramKey.length > 0) {
                    const params = []
                    for (let r in row) {
                        for (let p of paramKey) {
                            if (r === p) {
                                params.push(row[r])
                                break
                            }
                        }
                    }
                    method(...params)
                } else {
                    method()
                }
            }
        }
        return {
            tableShowData, currentPage, total, pageSize, tableLayout,
            handleSizeChange, handleCurrentChange, handle
        }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97

调用：
剧本：

        /*列表数据*/
        const tableData = ref([])
        /*显示列表内容*/
        const columns = ref([
            {prop: "noticeTitle", label: "公告标题", len: 350},
            {prop: "noticeType", label: "公告类型"},
            {prop: "createTime", label: "创建时间"},
            {prop: "readNum", label: "已阅人数"},
            {prop: "noReadNum", label: "未阅人数"},
        ])
        /*按钮配置*/
        const buttonConfig = ref({
            //是否显示按钮
            show: true,
            //自定义方法配置, 如果使用自定义方法，最好不要（不是不能）再传buttons中method，直接在调用的方法中全部处理
            emitConfig: true,
            buttons: [
                {
                    //按钮名称
                    label: "查看",
                    //按钮图标，element提供的icon或者svg
                    icon: markRaw(View),
                    //显示条件，针对有选择显示的选项按钮
                    show: markRaw(() => true),
                    //按钮样式
                    type: "",
                    //绑定的click方法
                    //method: markRaw((id) => {console.log(id)} ),
                    //设置emit
                    emitKey: "browse",
                    //绑定方法需要的参数key，必须是表格数据的关键字, 且顺序与上面方法参数一致
                    paramKey: ["id"]
                }, {
                    //按钮名称
                    label: "编辑",
                    //按钮图标，element提供的icon或者svg
                    icon: markRaw(Edit),
                    //显示条件，针对有选择显示的选项按钮
                    show: markRaw(releaseStatus => releaseStatus === '0'),
                    //按钮样式
                    type: "success",
                    //绑定的click方法
                    //method: markRaw((id) => {console.log(id)} ),
                    //设置emit
                    emitKey: "edit",
                    //绑定方法需要的参数key，必须是表格数据的关键字, 且顺序与上面方法参数一致
                    paramKey: ["id"],
                }, {
                    //按钮名称
                    label: "查阅",
                    //按钮图标，element提供的icon或者svg
                    icon: markRaw(Search),
                    //显示条件，针对有选择显示的选项按钮
                    show: markRaw(releaseStatus => releaseStatus !== '0'),
                    //按钮样式
                    type: "success",
                    //绑定的click方法
                    //method: markRaw((id) => {console.log(id)} ),
                    //设置emit
                    emitKey: "seeStatus",
                    //绑定方法需要的参数key，必须是表格数据的关键字, 且顺序与上面方法参数一致
                    paramKey: ["id"],
                }, {
                    //按钮名称
                    label: "删除",
                    //按钮图标，element提供的icon或者svg
                    icon: markRaw(Delete),
                    //显示条件，针对有选择显示的选项按钮
                    show: markRaw(() => true),
                    //按钮样式
                    type: "danger",
                    //绑定的click方法
                    //method: markRaw((id) => {console.log(id)} ),
                    //设置emit
                    emitKey: "delete",
                    //绑定方法需要的参数key，必须是表格数据的关键字, 且顺序与上面方法参数一致
                    paramKey: ["id"],
                }
            ]
        })
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80

模板

<OaTable :tableData="tableData" :columnName="columns" :buttonConfig="buttonConfig" @browse="browseNotice"/>
1