Vue2.0公用组件封装-表格

Vue2.0 + element-ui

最近做后端管理系统，复制粘贴了好多同样的的表格，基本功能都类似，但是每个页面都得拷贝粘贴一次，于是对表格做了个二次封装，

1表格列动态接受数组json格式数据

const tableEle= [{
		prop: 'number',
		label: '编号',
		width: '190',
	},
	{
		prop: 'name',
		label: '申请人',
		width: ''
	},
	{
		prop: 'type',
		label: '申请人类型',
		width: ''
	},
	{
		prop: 'phone',
		label: '联系电话',
		width: ''
	},
	{
		prop: '',
		label: '操作',
		width: ''，
		callback: 'true'
	},
	。。。。。。

]

2表格行动态接受的接口json中，操作列的按钮部分也在里面,后端直接控制显示哪几个按钮，什么状态显示什么按钮，链接跳转与带哪些参数（后端和前端一起定）

比如：

[{

id:1,

name:小罗，

list_button: [{

                btn_name:“详情”，

               btn_id:1,

              btn_url:'/url?id=***' } ],

}]

然后我们就可以封装了，引入element-ui里面的table.然后封装组件

<template>
<div class="json-table">
    <el-table
        :data="tableData"
        style="width: 100%"
    >
        <el-table-column
            v-for="(item, key) in tableEle"
            :key="item.prop"
            :prop=item.prop
            :label=item.label
            :width=item.width
            align="center"
        >
        <template slot-scope="scope" >
            <div class="action-btn" v-if="!!item.prop && !item.type" >
            	<span v-if="item.prop=='cash'">¥{{ scope.row[item.prop]}}</span>
                <span v-else>{{ scope.row[item.prop]}}</span>
            </div>
            <div class="action-btn" v-if="!!item.prop && item.type=='img'" >
                <el-image
                style="width: 100px; height: 100px"
                :src="scope.row[item.prop]"
                fit="contain"></el-image>
            </div>
            <div class="action-btn" v-else-if="!item.prop" >
                <div v-for="item in scope.row.list_button">
                    <el-button style="width: 100px; margin-bottom: 10px;" type="primary" @click="appClick(item.pri_operate_method, scope.row)">
                        {{item.pri_method_name}}
                    </el-button>
                </div>
                <div v-if = "item.callback">
                    <slot :data = "scope.row[item.prop]"></slot>
                </div>
            </div>
        </template>
        </el-table-column>
    </el-table>
</div>
</template>
  
  <script>
export default {
    name:'JsonTable',
    props:[ 'tableData', 'tableEle'],
    created(){
        
    },
    data() {
        return {
            
        }
    },
    methods:{
        //操作按钮点击事件
        appClick(methodsName, item){
            this.$emit(methodsName, item)
            //methods[methodsName](_this, item)
        },
    }
}  

  </script>
  
  <style scoped>

  </style>
  

列循环在el-table-column中。传入的数据是tableEle。

行循环是从后端读入的接口，传入的数据在el-table中，

传入的数据里，

label是表格列的名称，

props是参数名称。

传入的按钮列表数组循环，有几个按钮循环几次。

methods中的按钮点击事件appClick中的emit方法也是动态的，具体方法名methodsName和传递数据，根据接口数据确定。

如果传入的列数据中有callback参数，使用组件时就可以把数据绑定给组件插槽。实现循环插槽里的数据使用

<JsonTable 
    :tableData="dataList" 
    :tableEle="table.tableEle" 
    @details="details" 
    @verify="verify" 
>
    <template slot-scope="datas">
            <div>{{datas.id}}{{datas.name}}</div>
    </template>

</JsonTable>