VUE element-ui 寫個複用Table組件

時間 2019-11-05

標籤 vue element table 組件简体版

原文原文鏈接

餓了麼的table組件功能很強大，對於項目中的各類表格基本夠用，可是……我的對於它以列爲單位的操做不習慣 =。=因此改爲了另外一種方式（我不會告訴你其實本質沒變）。vue

項目中表格較多，因此複用性最重要this

步驟一

先來個基本的表格展現spa

官例的tableDatacode

tableData: [{
    date: '2016-05-02',
    name: '王小虎',
    address: '上海市普陀區金沙江路 1518 弄'
}, {
    date: '2016-05-04',
    name: '王小虎',
    address: '上海市普陀區金沙江路 1517 弄'
}, {
    date: '2016-05-01',
    name: '王小虎',
    address: '上海市普陀區金沙江路 1519 弄'
}, {
    date: '2016-05-03',
    name: '王小虎',
    address: '上海市普陀區金沙江路 1516 弄'
}]

table.vuecomponent

<template>
    <el-table :data="tableData" border>
        <el-table-column prop="date" label="日期"></el-table-column>
        <el-table-column prop="name" label="姓名"></el-table-column>
        <el-table-column prop="address" label="地址"></el-table-column>
    </el-table>
</template>

步驟二

簡化一下表格：排序

//table.vue
<template>
    <el-table :data="tableData" border>
        <el-table-column v-for="(item,key) in tableKey" 
        :key="key"
        :prop="item.value"
        :label="item.name"></el-table-column>
    </el-table>
</template>
<script>
export default{
    name: 'table',
    data(){
        return{
            tableData:[...],
            tableKey: [{
                name: '日期',
                value: 'date'
            },{
                name: '姓名',
                value: 'name'
            },{
                name: '地址',
                value: 'address'
            }]
        }
    }
}
</script>

步驟三

複用table.vue就是————給它數據的同時告訴它個人字段名唄ip

新建一個父組件sl_table.vueit

//sl_table.vue
<template>
    <sl-table :tableData="tableData" :tableKey="tableKey"></sl-table>
</template>
<script>
import Table from '@/components/table'
export default{
    name: 'sl-table',
    data(){
        return {
            tableData: [...]
            tableKey: [{
                name: '日期',
                value: 'date'
            },{
                name: '姓名',
                value: 'name'
            },{
                name: '地址',
                value: 'address'
            }]
        }
    },
    components: {
        'sl-table': Table
    }
}
</script>

table.vue就更簡單了table

//table.vue
<template>
    <el-table :data="tableData" border>
        <el-table-column v-for="(item,key) in tableKey" 
        :key="key"
        :prop="item.value"
        :label="item.name"></el-table-column>
    </el-table>
</template>
<script>
export default{
    name: 'table',
    data(){
        return{
            
        }
    },
    props:['tableData','tableKey'],
}
</script>

步驟四

能夠根據需求修改table的形式模板

列寬度
這個較爲簡單，能夠直接加個屬性

//sl_table.vue
...
    data(){
        return {
            tableData: [...]
            tableKey: [{
                name: '日期',
                value: 'date',
                width: 80
            },{
                name: '姓名',
                value: 'name',
                width: 80
            },{
                name: '地址',
                value: 'address'
            }]
        }
    },
...

table.vue

//table.vue
...
<el-table-column v-for="(item,key) in tableKey" 
:key="key"
:prop="item.value"
:label="item.name"
:width="item.width"></el-table-column>
...

自定義模板列

若是咱們須要告訴組件哪一個是自定義的列，因此添加一個屬性operate

table.vue

<el-table-column v-for="(item,key) in tableKey" 
v-if="!item.operate"
:key="key"
:prop="item.value"
:label="item.name"
:width="item.width"></el-table-column>

<!-- 自定義 -->
<el-table-column v-else>
    <template scope="scope">
        <slot :name="item.value" :$index="scope.$index" :row="scope.row"></slot>
    </template>
</el-table-column>

//sl_table.vue
<sl-table :tableData="tableData" :tableKey="tableKey">
    <template slot="date" scope="scope">
        <span>{{ scope.row.date | DateFilter }}</span>
    </template>
</sl-table>
...
        data(){
            return {
                tableData: [...]
                tableKey: [{
                    name: '日期',
                    value: 'date',
                    operate: true
                },{
                    name: '姓名',
                    value: 'name',
                    operate: false
                },{
                    name: '地址',
                    value: 'address',
                    operate: false
                }]
            }
        },
        filters: {
            DateFilter(){...}
        }
...

表格展開行

相似寬度，只要sl_table.vue傳入一個isExpand的屬性。這裏加個每次只能展開一行的效果：

//sl_table.vue

<sl-table :tableData="tableData" :tableKey="tableKey" :isExpand="true" :isExpandOnly="true">
    <template slot="expand" scope="scope">
        {{...expand something}}
    </template>
    ...
</sl-table>

table.vue

//table.vue
<el-table :data="tableData" border @expand="handleExpand" ref="raw_table">
    <el-table-column v-if="isExpand" type="expand">
        <template scope="scope">
            <slot name="expand" :$index="scope.$index" :row="scope.row"></slot>
        </template>
    </el-table-column>
</el-table>
...
props: ['tableData','tableKey','isExpand','isExpandOnly'],
methods: {
    handleExpand(row,expanded){
        if(this.isExpand && this.isExpandOnly){
           this.$refs.raw_table.store.states.expandRows = expanded ? [row] : [] 
        }
    }
}

其餘的（排序、多選）操做也是相似添加。。。多不贅述。