基于element ui的el-table二次封装

记录下自己封装table基础crud方便开发

2021-04-21 支持key为‘companies[0].pivot.name’的特殊字符串

2021-04-25 优化特殊字符串判断处理 参考大佬microanswer的写法

2021-04-26 增加方法二eval()

2021-05-21 增加表单嵌套expand

2021-07-05 增加自定义头部信息 （v-slot:xxx.header）

2021-08-24 使用v-bind="$attrs"及v-on=“$listeners”简化代码，修改使用文档

 

待解决问题：

无法在封装后的组件中用refs直接调用el-table自带的方法，需要自己在methods中转

 

效果图

 

dw-crud的使用 　　 columnChange组件

<template>
    <dw-crud selection :columns="columns" :data="data" @selection-change="handleSelectionChange">
        <!-- 当column中的slot为true 则以key为插槽名（#key）传入 -->
        <template #depot="{ row }">
            <column-change type="select" :value="row.depot" :options="depotOption" @change="changeNum(row.id, $event)" />
        </template>
        <template #number="{ row }">
            <column-change type="input" search :value="row.number" @change="changeNum(row.id, $event)" />
        </template>
        <!-- #op特指操作列 可以自行去dw-crud修改 -->
        <template #op="{ row }">
            <el-button type="text">加入销售订单</el-button>
            <el-button type="text">删除</el-button>
        </template>
    </dw-crud>
</template>

<script>
import dwCrud from './dwCrud'
// 个人封装的行内编辑input和select
import columnChange from './columnChange'

export default {
    components: {
        dwCrud,
        columnChange,
    },
    data() {
        return {
            columns: [
                {
                    title: 'ID',
                    key: 'id',
                    width: '50px',
                },
                {
                    title: '仓库',
                    slot: 'depot',
                },
                {
                    title: '数量',
                    slot: 'number',
                },
            ],
            //   测试数据
            depotOption: [
                { label: '仓库A', value: 1 },
                { label: '仓库B', value: 2 },
                { label: '仓库C', value: 3 },
            ],
            data: [
                {
                    id: 1,
                    depot: 1,
                    number: 7000,
                },
                {
                    id: 2,
                    depot: 2,
                    number: 5000,
                },
            ],
        }
    },
    methods: {
        changeNum(id, val) {
            console.log('父组件取值：', id, val)
        },
        handleSelectionChange() {},
    },
}
</script>

<style></style>

 

 

 

dwCrud组件（el-table）

根据目前的业务需求封装。用了slot具名插槽去区分特殊的行内展示<template>

<template>
    <el-table ref="table" v-bind="$attrs" v-on="$listeners" :size="size">
        <!-- 多选框 -->
        <el-table-column v-if="selection" type="selection" align="center" width="55" />
        <!-- 表单嵌套 -->
        <el-table-column v-if="expand" type="expand">
            <template slot-scope="{ row, $index }">
                <slot name="expand" :row="row" :index="$index"></slot>
            </template>
        </el-table-column>
        <!-- 文本数据渲染 -->
        <template v-for="(column, index) in columns">
            <el-table-column :key="index" :min-width="column.width" :sortable="column.sortable" :prop="column.key">
                <!-- 自定义头部  slotName.header -->
                <template slot="header" slot-scope="{ row, $index }">
                    <slot v-if="$scopedSlots[`${column.slot}.header`]" :name="`${column.slot}.header`"></slot>
                    <span v-else>{{ column.title }}</span>
                </template>

                <!-- 主体内容 -->
                <template slot-scope="{ row, $index }">
                    <!-- 如果有插槽 -->
                    <slot v-if="column.slot" :name="column.slot" :row="row" :index="$index"></slot>
                    <!-- 过滤 （暂未完善） -->
                    <!-- <span v-else-if="column.format">{{ key2val(row, column.key) | column.format }}</span> -->
                    <!-- 默认 -->
                    <span v-else>{{ key2val(row, column.key) }}</span>
                </template>
            </el-table-column>
        </template>
        <!-- 特殊处理的操作布局 默认存在 -->
        <el-table-column :fixed="opFixed" label="操作" v-if="operation" :min-width="opWidth">
            <template slot-scope="{ row, $index }">
                <slot name="op" :row="row" :index="$index"></slot>
            </template>
        </el-table-column>
    </el-table>
</template>

<script>
import { errLog } from '@/util/index'

export default {
    /**
     * @name: HDW
     * @msg: 基于el-table二次封装
     * @param {
     *  接收参数：
     *      size                        table size                  |   String
     *      selection                   是否需要多选                 |   Boolean
     *      columns                     表头                         |   Array
     *      data                        内容                         |   Array
     *      operation                   是否需要操作                  |   Boolean
     *      op-width                    操作宽度                     |   String
     *      expand                      表单嵌套表单                  |   Boolean
     *      op-fixed                    操作固定                      |   string, boolean
     *
     *  el-table 参数 : （v-bind="$attrs"） 全部支持
     *
     *  el-table-column 参数：（可自行在columns添加）      默认参数
     *      sortable                                    true, false, 'custom'
     *
     *  columns 参数：
     *          {
     *              title: 'ID',
     *              key: 'id',                  //  页面展示 row['id']
     *              width: '50px',              //  min-width
     *              slot: 'depot',              //   是否为插槽 value 值为插槽名字
     *              sortable:'custom'
     *          }
     *      ],
     *
     *  el-table 事件： （v-on="listeners"） 全部支持
     *      多选监听（selection）       @selection-change
     *      单选监听                    @row-click
     *      当前所选行                  @current-change
     *      切换排序                    @sort-change
     *
     *  el-table 方法：（暂未解决 refs 穿透，需自行在 methods 添加）
     *      clearSelection()
     *      toggleRowSelection()
     *      toggleAllSelection()
     *      toggleRowExpansion()
     *      setCurrentRow()
     * }
     *
     */
    name: 'dwCrud',
    // inheritAttrs: true,
    props: {
        size: {
            type: String,
            default: 'mini', // medium / small / mini
        },
        columns: {
            type: Array,
            default: () => [],
        },
        selection: {
            type: Boolean,
            default: false,
        },
        expand: {
            type: Boolean,
            default: false,
        },
        operation: {
            type: Boolean,
            default: true,
        },
        'op-fixed': {
            type: String,
            default: 'right',
        },
        'op-width': {},
    },
    methods: {
        clearSelection() {
            this.$refs['table'].clearSelection()
        },
        toggleRowSelection(row, selected) {
            this.$refs['table'].toggleRowSelection(row, selected)
        },
        toggleAllSelection() {
            this.$refs['table'].toggleAllSelection()
        },
        toggleRowExpansion(row, expanded) {
            this.$refs['table'].toggleRowExpansion(row, expanded)
        },
        setCurrentRow(row) {
            this.$refs['table'].setCurrentRow(row)
        },
        /**
         * 大佬的写法 (microanswer)
         *
         * obj = {a:{b:{c:1},b1:[2,3,4]}}
         *
         * get(obj,'a.b.c')         // 1
         * get(obj,'a.b1[2]')       // 4
         * get(obj,['a','b','c'])   // 1
         *
         */
        get(obj, key) {
            key = Array.isArray(key) ? key.join('.') : key
            // 方法一 用到了new Funcion()的语法拼接 和 function()()立即执行函数
            return new Function('obj', `return obj${key ? `.${key}` : ''}`)(obj, key)
            // 方法二 eval()
            return eval(`obj${key ? `.${key}` : ''}`)
        },
        // 根据大佬提供的写法优化
        key2val(row, key) {
            key = Array.isArray(key) ? key.join('.') : key
            let res
            try {
                res = new Function('row', `return row${key ? `.${key}` : ''}`)(row, key)
            } catch (err) {
                errLog('dw-crud', err, 'warn')
                res = null
            }
            return res
        },
        // 以前的思路
        // 根据key找到对应的字段
        old_key2val(row, key) {
            // return this.get(row,key)
            const arr = key.split('.')
            return this.recKey(row, arr)
        },
        // 递归key
        recKey(obj, key = []) {
            // 如果是最底层
            if (!key.length) return obj
            // 未到最底层但已是 null/undefined
            if (key.length && !obj) {
                errLog('dw-crud', `${key.join('.')}不存在,请填写正确的key名`, 'warn')
                return null
            }
            const key0 = key.shift()
            const regObj = this.regKey(key0)
            // 如果匹配出当前key是数组 eg: companies[11]
            if (regObj) {
                const { name, inx } = regObj
                return this.recKey(obj[name][inx], key)
            } else {
                return this.recKey(obj[key0], key)
            }
        },
        // 正则找出 eg: companies[11]
        regKey(key) {
            const reg = /([A-Za-z]+)\[(.*?)\]/g
            // 匹配出 companies(i=1) 和 11(i=2)
            const res = reg.exec(key)
            if (!res) return null
            const name = res[1]
            const inx = res[2]
            return { name, inx }
        },
    },
    mounted() {},
}
</script>

 

 

 

errLog函数

export const errLog = (component, message, status = 'error') => {
    console[status](`[${component} error]:\n${message}`)
}

 

< template >

     < el-table  ref= " table "  v-bind = "$attrs "  v-on = "$listeners "  : size = "size " >

         <!-- 多选框 -->

         < el-table-column  v-if = "selection "  type= " selection "  align= " center "  width= " 55 " / >

         <!-- 表单嵌套 -->

         < el-table-column  v-if = "expand "  type= " expand " >

             < template  slot-scope= " { row, $index } " >

                 < slot  name= " expand "  : row = "row "  : index = "$index " ></ slot >

             </ template >

         </ el-table-column >

         <!-- 文本数据渲染 -->

         < template  v-for = " (column , index )  in columns " >

             < el-table-column  : key = "index "  : min-width = "column .width "  : sortable = "column .sortable "  : prop = "column .key " >

                 <!-- 自定义头部  slotName.header -->

                 < template  slot= " header "  slot-scope= " { row, $index } " >

                     < slot  v-if = "$scopedSlots [ `${column .slot } .header ` ] "  : name = " `${column .slot } .header ` " ></ slot >

                     < span  v-else >{{ column .title  }}</ span >

                 </ template >

                 <!-- 主体内容 -->

                 < template  slot-scope= " { row, $index } " >

                     <!-- 如果有插槽 -->

                     < slot  v-if = "column .slot "  : name = "column .slot "  : row = "row "  : index = "$index " ></ slot >

                     <!-- 过滤 （暂未完善） -->

                     <!-- <span v-else-if="column.format">{{ key2val(row, column.key) | column.format }}</span> -->

                     <!-- 默认 -->

                     < span  v-else >{{  key2val (row , column .key )  }}</ span >

                 </ template >

             </ el-table-column >

         </ template >

         <!-- 特殊处理的操作布局 默认存在 -->

         < el-table-column  : fixed = "opFixed "  label= " 操作 "  v-if = "operation "  : min-width = "opWidth " >

             < template  slot-scope= " { row, $index } " >

                 < slot  name= " op "  : row = "row "  : index = "$index " ></ slot >

             </ template >

         </ el-table-column >

     </ el-table >

</ template >

< script >

import  { errLog  }  from  ' @/util/index '

export  default  {

     /**

     * @name: HDW

     * @msg: 基于el-table二次封装

     * @param {

     *  接收参数：

     *      size                        table size                  |   String

     *      selection                   是否需要多选                 |   Boolean

     *      columns                     表头                         |   Array

     *      data                        内容                         |   Array

     *      operation                   是否需要操作                  |   Boolean

     *      op-width                    操作宽度                     |   String

     *      expand                      表单嵌套表单                  |   Boolean

     *      op-fixed                    操作固定                      |   string, boolean

     *

     *  el-table 参数 : （v-bind="$attrs"） 全部支持

     *

     *  el-table-column 参数：（可自行在columns添加）      默认参数

     *      sortable                                    true, false, 'custom'

     *

     *  columns 参数：

     *          {

     *              title: 'ID',

     *              key: 'id',                  //  页面展示 row['id']

     *              width: '50px',              //  min-width

     *              slot: 'depot',              //   是否为插槽 value 值为插槽名字

     *              sortable:'custom'

     *          }

     *      ],

     *

     *  el-table 事件： （v-on="listeners"） 全部支持

     *      多选监听（selection）       @selection-change

     *      单选监听                    @row-click

     *      当前所选行                  @current-change

     *      切换排序                    @sort-change

     *

     *  el-table 方法：（暂未解决 refs 穿透，需自行在 methods 添加）

     *      clearSelection()

     *      toggleRowSelection()

     *      toggleAllSelection()

     *      toggleRowExpansion()

     *      setCurrentRow()

     *  }

     *

     */

    name :  ' dwCrud ' ,

     // inheritAttrs: true,

    props :  {

        size :  {

            type :  String ,

            default :  ' mini ' ,  // medium / small / mini

         },

        columns :  {

            type :  Array ,

             default :  ()  =>  [],

         },

        selection :  {

            type :  Boolean ,

            default :  false ,

         },

        expand :  {

            type :  Boolean ,

            default :  false ,

         },

        operation :  {

            type :  Boolean ,

            default :  true ,

         },

         ' op-fixed ' :  {

            type :  String ,

            default :  ' right ' ,

         },

         ' op-width ' :  {},

     },

    methods :  {

         clearSelection ()  {

             this .$refs [ ' table ' ]. clearSelection ()

         },

         toggleRowSelection ( row ,  selected )  {

             this .$refs [ ' table ' ]. toggleRowSelection (row , selected )

         },

         toggleAllSelection ()  {

             this .$refs [ ' table ' ]. toggleAllSelection ()

         },

         toggleRowExpansion ( row ,  expanded )  {

             this .$refs [ ' table ' ]. toggleRowExpansion (row , expanded )

         },

         setCurrentRow ( row )  {

             this .$refs [ ' table ' ]. setCurrentRow (row )

         },

         /**

         * 大佬的写法 (microanswer)

         *

         * obj = {a:{b:{c:1},b1:[2,3,4]}}

         *

         * get(obj,'a.b.c')         // 1

         * get(obj,'a.b1[2]')       // 4

         * get(obj,['a','b','c'])   // 1

         *

         */

         get ( obj ,  key )  {

            key  =  Array . isArray (key )  ? key . join ( ' . ' )  : key

             // 方法一 用到了new Funcion()的语法拼接 和 function()()立即执行函数

             return  new  Function ( ' obj ' ,  ` return obj ${key   ?   ` . ${key }`   :   '' }` )(obj , key )

             // 方法二 eval()

             return  eval ( ` obj ${key   ?   ` . ${key }`   :   '' }` )

         },

         // 根据大佬提供的写法优化

         key2val ( row ,  key )  {

            key  =  Array . isArray (key )  ? key . join ( ' . ' )  : key

             let res

             try  {

                res  =  new  Function ( ' row ' ,  ` return row ${key   ?   ` . ${key }`   :   '' }` )(row , key )

             }  catch  (err )  {

                 errLog ( ' dw-crud ' , err ,  ' warn ' )

                res  =  null

             }

             return res

         },

         // 以前的思路

         // 根据key找到对应的字段

         old_key2val ( row ,  key )  {

             // return this.get(row,key)

             const  arr  = key . split ( ' . ' )

             return  this . recKey (row , arr )

         },

         // 递归key

         recKey ( obj ,  key  =  [])  {

             // 如果是最底层

             if  ( !key . length )  return obj

             // 未到最底层但已是 null/undefined

             if  (key . length  &&  !obj )  {

                 errLog ( ' dw-crud ' ,  `${key . join ( ' . ' ) } 不存在,请填写正确的key名 ` ,  ' warn ' )

                 return  null

             }

             const  key0  = key . shift ()

             const  regObj  =  this . regKey (key0 )

             // 如果匹配出当前key是数组 eg: companies[11]

             if  (regObj )  {

                 const  {  name ,  inx  }  = regObj

                 return  this . recKey (obj [name ][inx ], key )

             }  else  {

                 return  this . recKey (obj [key0 ], key )

             }

         },

         // 正则找出 eg: companies[11]

         regKey ( key )  {

             const  reg  =   /( [A-Za-z ] +) \[(. *?) \] /g

             // 匹配出 companies(i=1) 和 11(i=2)

             const  res  = reg . exec (key )

             if  ( !res )  return  null

             const  name  = res [ 1 ]

             const  inx  = res [ 2 ]

             return  { name , inx  }

         },

     },

     mounted ()  {},

}

</ script >