vue封裝element-ui table組件

時間 2020-05-26

原文原文鏈接

更新時間2020.3.18html

爲何要再次封裝？

element-ui官網的例子

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

  <script>
    export default {
      data() {
        return {
          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 弄'
          }]
        }
      }
    }
  </script>

每次新增表頭，須要在html中新增，代碼量會愈來愈多，且不方便維護。vue

怎麼封裝？

剝離出公共的地方

抽離差別，用props傳值

優化細節，提高組件的健壯性

剝離公共

oss_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"
                         :width="item.width"></el-table-column>
    </el-table>
</template>
<script>
    export default{
        name: 'oss_table',
        data(){
            return {
                tableData: [],
                tableKey: [{
                    name: '日期',
                    value: 'date',
                    width: 80
                },{
                    name: '姓名',
                    value: 'name',
                    width: 80
                },{
                    name: '地址',
                    value: 'address'
                }]
            }
        },      
    }
</script>

table的基本屬性用：進行綁定，而後將屬性對於的值放在data裏，用for循環遍歷出來。element-ui

抽出差別

全部的表格只是樣子同樣，數據並不同，將數據剝離出來，用props傳值。優化

使用

<template>    
            <OSS_table :tableData="tableData" :tableKey="tableKey"></OSS_table>     
</template>

<script>
    import OSS_table from "../AllComponents/OSS_table";

    export default {
        components: {OSS_table},
        data() {
            return {
                tableData: [{name: '11', date: '11', address: '11'}],
                tableKey: [{
                    name: '日期',
                    value: 'date',
                }, {
                    name: '姓名',
                    value: 'name',
                }, {
                    name: '地址',
                    value: 'address',
                },]
            }
        }
    }
</script>

<style scoped>

</style>

組件

<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: 'OSS_table',
        data(){
            return {

            }
        },
        props:['tableData','tableKey'],
    }
</script>
<style scoped>

</style>

呈現效果：
ui