记vue+elementUI的动态表格封装

1.数据结构

表头数据：

 columns: [
                { columnLabel: '姓名', columnName: 'name', width: 300, selected: true, selectedType: 0, skipStatus: true, skipUrl: "路径",show:false },
                { columnLabel: '年龄', columnName: 'age', width: 150, selected: true, selectedType: 0, skipStatus: false,show:false },
                { columnLabel: '性别', columnName: 'gender', width: 300, selected: true, selectedType: 1, skipStatus: false,show:false,chooseList: [{ label: '男', value: '0' }, { label: '女', value: '1' },] },
                { columnLabel: '学校', columnName: 'school', width: 300, selected: false, selectedType: 0, skipStatus: true, skipUrl: "path",show:false },
                { columnLabel: '学历', columnName: 'qualification', width: 250, selected: true, selectedType: 0, skipStatus: false,show:false },
            ]

表数据

            listData: [
                { id: 101, name: '沈璃', age: 18, gender: '女', school: '双一流大学', qualification: '博士' },
                { id: 102, name: '行止', age: 18, gender: '男', school: '清华大学', qualification: '研究生' },
                { id: 103, name: '墨方', age: 18, gender: '男', school: '北京大学', qualification: '本科' },
                { id: 104, name: '行云', age: 18, gender: '男', school: '中原工学院', qualification: '本科' },
                { id: 105, name: '小荷', age: 18, gender: '女', school: '苏州大学', qualification: '本科' },
                { id: 106, name: '清夜', age: 18, gender: '男', school: '家里蹲大学', qualification: '初中' },
            ],

2.表格组件

<template>
    <div class="">
        <div class="table-div">
            <el-table :data="listData" row-key="id" border default-expand-all stripe
                :header-cell-style="tableHeaderColor" @selection-change="handleSelectionChange"
                v-loading="tableLoading">
                <el-table-column type="selection" width="80" align="center"></el-table-column>
                <template v-for="(item, index) in columns">
                    <!-- 开启搜索并且show为true -->
                    <el-table-column :key="index" :label="item.columnLabel" :prop="item.columnName" sortable
                        :width="item.width" v-if="item.selected && item.show" align="center">
                        <!-- 表头操作 -->
                        <template slot="header" slot-scope="scope">
                            <!-- headerClick为了阻止表头排序事件自动冒泡 -->
                            <span @click="headerClick">
                                <span @click="search(item.columnName, item.selectedType)">{{ item.columnLabel }}</span>
                                <i class="el-icon-search" @click="search(item.columnName, item.selectedType)"></i>
                            </span>

                            <!-- headerClick为了阻止表头排序事件自动冒泡 -->
                            <!-- 0为input框 -->
                            <div @click="headerClick" :ref="'input' + item.columnName" style="display: none;"
                                v-if="item.selectedType == 0">
                                <el-input v-model="searchForm[item.columnName]" size="small"
                                    @change="submitSearch(item)" placeholder="输入关键字搜索" />
                            </div>
                            <!-- 1为下拉框 -->
                            <div @click="headerClick" :ref="'select' + item.columnName" style="display: none;"
                                v-if="item.selectedType == 1">
                                <el-select v-model="searchForm[item.columnName]" placeholder="请选择" size="small"
                                    @change="submitSearch(item)" filterable clearable>
                                    <el-option v-for="(a, index) in item.chooseList" :key="index" :label="a.name"
                                        :value="a.id">
                                    </el-option>
                                </el-select>
                            </div>
                        </template>
                        <!-- 表数据操作 -->
                        <template slot-scope="scope">
                            <el-button v-if="item.skipStatus" style="color: #409eff;text-decoration: underline;"
                                type="text" @click="into(item, scope.row)">{{ scope.row[item.columnName] }}</el-button>
                            <!-- 表示为回显数据 -->
                            <template v-else-if="item.controlType == 3">
                                <template v-for="(data, index) in item.chooseList">
                                    <span :key="index" v-if="data.id == scope.row[item.columnName]">{{ data.name
                                        }}</span>
                                </template>
                            </template>
                            <span v-else>{{ scope.row[item.columnName] }}</span>
                        </template>
                    </el-table-column>

                    <!-- 未开启搜索并且show为true -->
                    <el-table-column :key="index + item.columnLabel" :label="item.columnLabel" :prop="item.columnName"
                        sortable :width="item.width" v-if="item.show" align="center">
                        <template slot-scope="scope">
                            <el-button v-if="item.skipStatus" style="color: #409eff;text-decoration: underline;"
                                type="text" @click="into(item, scope.row)">{{ scope.row[item.columnName] }}</el-button>
                            <!-- 表示为回显数据 -->
                            <template v-else-if="item.controlType == 3">
                                <template v-for="(data, index) in item.chooseList">
                                    <span :key="index" v-if="data.id == scope.row[item.columnName]">{{ data.name
                                        }}</span>
                                </template>
                            </template>
                            <span v-else> {{ scope.row[item.columnName] }}</span>
                        </template>
                    </el-table-column>


                </template>
                <el-table-column label="操作" width="200" fixed="right" align="center">
                    <template slot-scope="scope">
                        <el-button size="small" type="primary" @click="update(scope.row)">编辑</el-button>
                        <el-button size="small" type="danger" @click="del(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <div class="PagiNation" style="max-width:100%;overflow: auto;text-align: center;">
            <el-pagination class="tablePage" @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="pageNum" :page-sizes="pageSizes" :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper" :total="total">
            </el-pagination>
        </div>

    </div>
</template>

<script type="text/ecmascript-6">
import {
    getCommonTableDataList,
} from '@/common/js/request';
export default {
    name: 'dynamicTable',
    props: {
        formId: Number,
        userId: Number,
    },
    components: {
    },
    data() {
        return {
            // 选择的数据
            multipleDataList: [],
            // 搜索框的显示
            searchShow: false,
            searchData: null,
            searchForm: {},
            // 分页参数
            pageNum: 1,
            pageSizes: [2, 5, 10, 15, 20, 30, 50, 100],
            pageSize: 5,
            total: 0,
            // 表格参数
            tableLoading: false,//表格加载状态
            columns: [], //表头
            listData: [], // 表数据,
            searchSql: null, //搜索条件
        }
    },
    mounted() {
        window.onresize = () => {
            return (() => {
                this.TableMaxHeight = Math.max(100, window.innerHeight - 380);
            })();
        };
    },
    created() {

    },
    activated() {
        this.loadingData();
    },
    watch: {

    },
    methods: {
        headerClick(e) {
            // console.log('点击了', e)
            e.cancelBubble = true // *****************************************
        },
        into(item, row) {
            console.log("进入详情");
            console.log(item);
            console.log(row);
        },
        // 删除
        del(row) {
            console.log(row);
        },
        // 修改
        update(row) {
            console.log(row);
        },
        // 搜索提交
        submitSearch(item, index) {
            let field = item.columnName;
            let value = this.searchForm[item.columnName];
            console.log(value);
            console.log(value != null);
            if (value != null) {
                console.log(field, value, "搜索sql");
                this.searchSql = field + " like '%" + value + "%'";
                console.log(this.searchForm);
                console.log(item);
                console.log(this.searchSql, "完全体sql");
                this.loadingData();
            } else {
                this.searchSql = null;
                this.loadingData();
            }

        },
        // 搜索显示隐藏 0input框，1选择框
        search(name, type) {
            console.log(type);
            console.log(name);
            if (type == 0) {
                this.$refs['input' + `${name}`][0].style.display = this.$refs['input' + `${name}`][0].style.display === 'none' ? 'block' : 'none';
            }
            if (type == 1) {
                this.$refs['select' + `${name}`][0].style.display = this.$refs['select' + `${name}`][0].style.display === 'none' ? 'block' : 'none';
            }
            // this.searchShow = this.searchShow ? false : true;
        },
        // 表格选择
        handleSelectionChange(val) {
            this.multipleDataList = val;
            console.log(val);
        },
        // 表格头部颜色
        tableHeaderColor() {
            return 'background-color: #f5f5f5'
        },
        // 分页
        handleSizeChange(val) {
            console.log(val);
            this.pageNum = 1;
            this.pageSize = val;
            this.loadingData();
        },
        handleCurrentChange(val) {
            this.pageNum = val;
            this.loadingData();
        },
        // 获取数据
        loadingData() {
            // 开启加载状态
            this.tableLoading = true;
            let parms = {
                formId: this.formId,
                userId: this.userId,
                pageSize: this.pageSize,
                pageNum: this.pageNum,
                searchSql: this.searchSql
            };
            getCommonTableDataList(parms).then(res => {
                if (res.data.errorCode == 0) {
                    let data = res.data.data;
                    // 表头
                    this.columns = data.columns;
                    // 表数据
                    this.listData = data.listData;
                    // 分页参数
                    this.pageNum = data.page[0].pageNum;
                    this.total = data.page[0].total;
                    this.pageSize = data.page[0].pageSize;
                } else {
                    this.$message({
                        message: '接口请求失败：' + res.data.message,
                        type: 'warning'
                    });
                }
                // 关闭加载状态
                this.tableLoading = false;
            })
        },
    }
}
</script>

<style type="text/css">
.table-div {
    width: 90%;
    margin: 20px auto;
}
</style>

3.父组件

<template>
    <div class="main-div">
        <h1 style="width: 90%;margin: auto;">联系人管理</h1>
        <!-- 按钮组 -->
        <div style="width: 90%;margin: 20px auto;text-align: right;">
            <el-button size="small" type="primary" @click="getChildData()">获取表格选中的值</el-button>
        </div>
        <!--表格-->
        <dynamicTable :formId="41" :userId="userId"></dynamicTable>
    </div>

</template>

<script type="text/ecmascript-6">
import {
    getRankMethodList,
} from '@/common/js/request';
import { isManager, getLoginUser } from "@/common/js/commons";
import axios from 'axios'
import dynamicTable from '@/components/crm/tool/dynamicTable';
export default {
    components: {
        dynamicTable
    },
    data() {
        return {
            formId: 42,
            userId: 5000527,
            TableMaxHeight: '',//表格高度
            // columns: [
            //     { columnLabel: '姓名', columnName: 'name', width: 300, selected: true, selectedType: 0, skipStatus: true, skipUrl: "路径" },
            //     { columnLabel: '年龄', columnName: 'age', width: 150, selected: true, selectedType: 0, skipStatus: false },
            //     { columnLabel: '性别', columnName: 'gender', width: 300, selected: true, selectedType: 1, skipStatus: false, chooseList: [{ label: '男', value: '0' }, { label: '女', value: '1' },] },
            //     { columnLabel: '学校', columnName: 'school', width: 300, selected: false, selectedType: 0, skipStatus: true, skipUrl: "path" },
            //     { columnLabel: '学历', columnName: 'qualification', width: 250, selected: true, selectedType: 0, skipStatus: false },
            // ],
            // listData: [
            //     { id: 101, name: '沈璃', age: 18, gender: '女', school: '双一流大学', qualification: '博士' },
            //     { id: 102, name: '行止', age: 18, gender: '男', school: '清华大学', qualification: '研究生' },
            //     { id: 103, name: '墨方', age: 18, gender: '男', school: '北京大学', qualification: '本科' },
            //     { id: 104, name: '行云', age: 18, gender: '男', school: '中原工学院', qualification: '本科' },
            //     { id: 105, name: '小荷', age: 18, gender: '女', school: '苏州大学', qualification: '本科' },
            //     { id: 106, name: '清夜', age: 18, gender: '男', school: '家里蹲大学', qualification: '初中' },
            // ],
        }
    },
    mounted() {
        window.onresize = () => {
            return (() => {
                this.TableMaxHeight = Math.max(100, window.innerHeight - 380);
            })();
        };
    },
    created() {

    },
    activated() {
        this.TableMaxHeight = Math.max(100, window.innerHeight - 380);
    },
    watch: {

    },
    methods: {

    }
}
</script>

<style type="text/css">
.main-div {
    margin-top: 50px;
}

.btn-div {
    width: 90%;
    margin: 20px auto;
    text-align: right;
}

.search-div {
    width: 90%;
    margin: 20px auto;
}
</style>