基于ElementUI实现自定义表格列表&操作列表

组件调用实例

<template>
    <CommonList :data="tableData" :loading="loading" :columns="columns">
    </CommonList>
</template>    

<script>
import CommonList from '@/components/CommonList.vue'
export default {
    name: 'xxx',
    data() {
        return {
            columns: [
                { label: '课程', prop: 'courseName', fixed: 'left', minWidth: '300' },
                { label: '预选档期', prop: 'translateSetting', minWidth: '150' },
                { label: '待进班学员', prop: 'aspirationCount', minWidth: '100' },
                {
                    label: '操作',
                    key: 'action',
                    fixed: 'right',
                    minWidth: '160',
                    handers: [{ text: '详情', icon: 'el-icon-s-data', action: this.show }],
                },
            ],
        },
        methods: {
            show() {
                console.log('show')
            }
        }
    }
</script>

组件封装

<template>
    <div class="m-common-list">
        <el-table border :data="data" :loading="loading" v-show="data.length > 0">
            <el-table-column
                :key="key"
                :prop="column.prop"
                :fixed="column.fixed"
                :label="column.label"
                :min-width="column.minWidth"
                v-for="(column, key) in columns"
                :align="column.align ? column.align : 'center'"
            >
                <template slot-scope="scope">
                    <div v-if="column.key === 'action'">
                        <el-button
                            :key="index"
                            :icon="hander.icon"
                            :type="hander.type ? hander.type : 'primary'"
                            :size="hander.size ? hander.size : 'mini'"
                            v-for="(hander, index) in column.handers"
                            @click="() => hander.action(scope.row)"
                        >
                            {{ hander.text }}
                        </el-button>
                    </div>
                    <span v-else>{{ scope.row[column.prop] }}</span>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>
<script>
import Vue from 'vue'
@Component
export default class CommonList extends Vue {
    name: 'common-list',
    props: {
        data: {
            type: Array,
        },
        columns: {
            type: Array,
        },
        loading: {
            type: Boolean,
            default: false,
        },
    },
};
</script>

通过以上封装来实现对于table的自定义列的实现以及对于列进行操作。