element-ui组件封装

基于element-ui，封装一些常用的组件，比如分页表格、分页下拉框；下拉框懒加载，以到达开箱即用的目的。

安装

前提是已安装了element-ui，安装教程可见：https://element.eleme.io/#/zh-CN/component/installation

npm install element-ui-components-pro

使用

main.js

import Vue from 'vue';
import ElementUI from 'element-ui';
import ElementUIPro from 'element-ui-components-pro';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);
Vue.use(ElementUIPro);

table.vue

<template>
    <ep-table
        :columns="columns"
        :request="request"
        :responseFormat="responseFormat"
        :pagination="pagination"
    >
    </ep-table>
</template>

<script>
    export default {
        data() {
            return {
                request: {
                    url: "/files/get",
                    method: "GET",
                    params: null,
                    data: null
                },
                columns: [
                    {
                        type: "selection",
                        width: "30",
                    },
                    {
                        prop: "id",
                        label: "ID",
                        width: "80",
                        sortable: true,
                    },
                    {
                        prop: "name",
                        label: "文件名称",
                        sortable: true,
                        ellipsis: true,
                    },
                    {
                        prop: "status",
                        label: "状态",
                        width: "大小",
                        width: "150",
                        sortable: true,
                        render: (h, {value}) => {
                            if (value == "正常")
                                return <el-tag type="success" size="medium" effect="plain">{value}</el-tag>;
                            else
                                return <el-tag  type="warning" size="medium" effect="plain">{value}</el-tag>;
                        }
                    },
                    {
                        prop: "size",
                        label: "大小",
                        width: "150",
                        sortable: true,
                    },
                    {
                        prop: "create_time",
                        label: "创建时间",
                        width: "250",
                        sortable: true,
                        show: false
                    },
                    {
                        prop: "update_time",
                        label: "更新时间",
                        width: "250",
                        sortable: true,
                    },
                    {
                        label: "操作",
                        width: "100",
                        render: (h, {value, row, scope}) => {
                            return <el-popover
                                placement="top"
                                width="160"
                                ref={"deletePop" + scope.$index}
                            >
                                <p>确定删除？</p>
                                <div style="text-align: right; margin: 0">
                                    <el-button size="mini" type="text" onClick={(e) =>
                                    {
                                        scope._self.$refs["deletePop" + scope.$index].showPopper = false;
                                    }}>取消</el-button>
                                    <el-button type="primary" size="mini" onClick={() => this.deleteRow(row.id, scope._self.$refs["deletePop" + scope.$index])}>确定</el-button>
                                </div>
                                <a href="javascript:void(0)" slot="reference">删除</a>
                            </el-popover>
                        }
                    }
                ],
            }
        },
        methods: {
            responseFormat: function (resp) {
                if (resp.success) {
                    return {
                        rows: resp.body.rows,
                        total: resp.body.total
                    }
                }
            },
            deleteRow: function (id, popper) {
                popper.showPopper = false;
            },
        }
    }
</script>

table预览

select.vue

<template>
    <ep-select multiple v-model="value" :request="request" :responseFormat="responseFormat" @change="change"/>
</template>

<script>
    export default {
        data() {
            return {
                value: null,
                request: {
                    url: "/table.json",
                    method: "GET"
                },
                responseFormat: resp => {
                    return {
                        rows: resp.body.rows.map(row => {
                            return {
                                value: row.id,
                                label: row.name,
                                render: <span>{row.name}<el-tag style="margin-left: 10px" type={row.status == "正常" ? "success" : "warning"}>{row.status}</el-tag></span>
                            }
                        }),
                        total: resp.body.total
                    }
                }
            }
        }
    }
</script>

select预览

开发

npm i
npm run dev