学习记录

封装element表格组件

封装组件是为了让代码可维护性，可读性更强，在开发时减少一些不必要的代码行数，接下来是对table组件的二次封装，假设大家都已经安装elementui组件库，并且已经按需引入了

首先创建一个组件文件，我就以Table.vue为文件名

要注意的是在使用的时候数据格式要和参数名称一致

<el-table-column
    :prop="item.param"
    :label="item.lable"
    v-for="(item, index) in tableColumns"
    :key="index"
    :sortable="item.sortable"
    :width="item.width"
>

也就是prop和label

<Table
    :tableColumns="tableColumns"
    :tableData="getpageData"
    :tableOperation="tableOperation"
    :isSelection="false"
>
    <!-- 自定义操作部分 -->
    <template v-slot:[tableOperation.param]="props">
        <el-button
            v-for="(item, index) in tableOperation.btnList"
            :key="index"
            :type="item.color"
            size="mini"
            @click="handleClick(props.scope.row, item.type)"
            >{{ item.label }}</el-button
        >
    </template>
</Table>

最后上组件代码

<template>
    <div>
        <el-table
            :data="tableData"
            style="width: 100%"
            :stripe="stripe"
            :border="border"
            :size="size"
            v-loading="loading"
            @selection-change="handleSelectionChange"
        >
            <!-- 是否支持复选 -->
            <el-table-column v-if="isSelection" width="55" type="selection" />
            <el-table-column
                :prop="item.param"
                :label="item.lable"
                v-for="(item, index) in tableColumns"
                :key="index"
                :sortable="item.sortable"
                :width="item.width"
            >
                <template slot-scope="scope">
                    <span v-if="item.render">{{ item.render(scope.row) }}</span>
                    <slot
                        v-else-if="item.slotName"
                        :name="item.slotName"
                        :scope="scope"
                    ></slot>
                    <span v-else>{{ scope.row[item.param] }}</span>
                </template>
            </el-table-column>
            <!-- 操作 -->
            <el-table-column
                v-if="tableOperation.label"
                :label="tableOperation.label"
            >
                <template slot-scope="scope">
                    <slot :name="tableOperation.param" :scope="scope">
                        <el-button
                            size="small"
                            v-for="(item, index) in tableOperation.btnList"
                            :key="index"
                            @click="handleClick(scope.row, item.type)"
                        >
                            {{ item.label }}
                        </el-button>
                    </slot>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>
<script>
export default {
    name: "Table",
    props: {
        tableColumns: {
            type: Array,
            required: true,
            default: () => {
                return [];
            },
        },
        tableData: {
            type: Array,
            required: true,
            default: () => {
                return [];
            },
        },
        tableOperation: {
            type: Object,
            default: () => {
                return {};
            },
        },
        stripe: {
            type: Boolean,
            default: false,
        },
        border: {
            type: Boolean,
            default: false,
        },
        size: {
            type: String,
            default: "small",
        },
        loading: {
            type: Boolean,
            default: false,
        },
        isSelection: {
            type: Boolean,
            default: false,
        },
    },
    data() {
        return {};
    },
    methods: {
        handleClick(row, type) {
            this.$emit("handleClick", row, type);
        },
        handleSelectionChange(val) {
            this.$emit("handleSelectionChange", val);
        },
    },
};
</script>