vue+element table的二次封装

table.vue文件

<template>
    <el-table
            :data="tableData"
            style="width: 100%"
            :row-class-name="tableRowClassName"
            :cell-style="{textAlign:'center'}"
            @selection-change="change"
            :show-header="showHeader"
            :border="border"
            :max-height="maxHeight"
            :v-loading="loading"
            :class="className"
            element-loading-text="给我一点时间"
            stripe
            fit
            highlight-current-row

    >
        <template v-for="tableColumn in tableList">
        <el-table-column
                :type="tableColumn.type"
                :width="tableColumn.width"
                v-if="tableColumn.type === 'selection'"
        ></el-table-column>
<!--    slot 添加自定义配置项-->
        <slot
                v-if="tableColumn.slot"
                :name="tableColumn.slot"
        ></slot>
 <!--  component 特殊处理某一项-->
        <component
                    v-else-if="tableColumn.component"
                    :is="config.component"
                    :col-config="tableColumn"
        ></component>
        <el-table-column
                :label="tableColumn.label"
                :type="tableColumn.type"
                :prop="tableColumn.prop"
                :width="tableColumn.width"
                :fixed="tableColumn.fixed "
                :sortable="tableColumn.sortable"
                v-if="(tableColumn.type !== 'selection')&&(tableColumn.type !== 'slot')"
        >
        </el-table-column>
     </template>
    </el-table>
</template>

<script>

    export default {
      
        data(){
            return{}
        },
        props: {
            tableList: {
                type: Array,
                default: function() {
                    return [];
                }
            },
            tableData: {
                type: Array,
                default: function() {
                    return [];
                }
            },
            showHeader: {
                type: Boolean,
                default: true
            },
            border: {
                type: Boolean,
                default: false
            },
            maxHeight: {
                type: [String, Number],
                default: null
            },
            loading: {
                type: Boolean,
                default: false
            },
            className: {
                type: String,
                default: ""
            },
            tableRowClassName: {
                type: String,
                default: ""
            }
        }
    }
</script>
<style scoped>
</style>

很多人不明白为什么这里要加一个slot,这个封装实际上就是把前面的tableList 作为一个 prop 传入,通过这个属性,我们就可以在table中编辑任何简单或者复制的列, 完美~

使用方法如下:

<!-- slot="sex" 不能省略,需要与下面配置项中的对应 -->
<el-table-column slot="sex" label="性别">
                    <template slot-scope="scope">
                        <el-input :v-model='scope.row.sex === 0 ? "男" : "女"' :value='scope.row.sex === 0 ? "男" : "女"'></el-input>
                    </template>
                </el-table-column>
 
tableList = [
      { prop: 'date', label: '日期' },
      { prop: 'name', label: '姓名' },
      { prop: 'address', label: '地址' },
      // 模版中的元素需要对应的有 slot="opt" 属性
      { slot: 'opt' }]

等等,假设我的 table 中有几列渲染比较复杂,那几列又都比较相似,像下面这种:

<el-table-column label="变化" slot="change">
      <span :slot-scope="row">
        {{ row['change'] > 0 ? '+' + row['change']: row['change'] }}
      </span>
    </el-table-column>
    <el-table-column label="趋势" slot="trend">
      <span :slot-scope="row">
        {{ row['trend'] > 0 ? '+' + row['trend']: row['trend'] }}
      </span>
    </el-table-column>

又重复写模版了...

使用 :is="component"
我们可以为配置项再增加一个属性 component, 用户可以指定 component 属性来特殊处理某列,实现如下:

<template>
  <my-table
    :tableData="tableData"
    :tableList="colConfigs">
  </my-table>
</template>
<script>
 
const PrefixPlusText = {
  props: ['colConfig'],
  template: `
    <el-table-column :label="colConfig.label">
      <span :slot-scope="{ row }">
        {{ parseInt(row[colConfig.prop]) > 0 ? '+' + row[colConfig.prop] : row[colConfig.prop] }}
      </span>
    </el-table-column>
  `
}
 
export default {
  data () {
    this.colConfigs = [
      { prop: 'change', label: '变化' component: PrefixPlusText },
      { prop: 'name', label: '趋势', component: PrefixPlusText },
    ]
    return {
      tableData: [{
        change: '12%',
        trend: '10%
      }, {
        change: '-12%',
        trend: '-10%'
      }]
    }
  }
}
</script>

总结

table 作为数据展示组件,在日常开发中经常被用到,通过这篇文章,可以看到结合 vue 的 slot/component 特性,做一层封装,可以大大简化 table 的使用,大部分时候只需写一个配置属性就可以了。

版权声明:除特别注明外,本站所有文章均为田珊珊个人博客原创

转载请注明:出处来自田珊珊个人博客 » vue+element table的二次封装

点赞

发表评论

电子邮件地址不会被公开。 必填项已用*标注