vue二次封装Element的table组件

欢迎扫码加群，一起讨论，共同学习成长！

效果图：

通过父子组件传值的方式

父组件：

<template>
  <div class='test'>
    <material :list="list" :columns="columns" :operates="operates"/>
  </div>
</template>
  
<script>
import material from './table'
export default {
  components:{
    material
  },
  data() {
    return {
      // 操作按钮
      operates:[
        {
          id:1,
          label:'管理',
          type:'info',
          method:(index,row)=>{
            this.handleManage(index, row)
          }
        },
        {
          id:1,
          label:'发布',
          type:'primary',
          method:(index,row)=>{
            this.handleRelease(index, row)
          }
        },
        {
          id:2,
          label:'编辑',
          type:'warning',
          method:(index,row)=>{
            this.handleEdit(index, row)
          }
        },
        {
          id:3,
          label:'删除',
          type:'danger',
          method:(index,row)=>{
            this.handleDel(index, row)
          }
        }
      ],
      columns:[
        {
          prop:'index',
          label:'序号',
          '80',
          align: 'center'
        },
        {
          prop:'code',
          '300',
          label:'产品编号',
          align: 'center'
        },
        {
          prop:'type',
          '200',
          label:'产品类型',
          align: 'center'
        },
        {
          prop:'name',
          '300',
          label:'产品名称',
          align: 'center'
        },
        {
          prop:'address',
          '200',
          label:'地区',
          align: 'center'
        },
        {
          prop:'status',
          '200',
          label:'状态',
          align: 'center'
        }
      ],
      list:[
        {
          name: "三房112901",
          address: "广东省",
          code: "zxj_3_f_n1129",
          type:'整装',
          status: '无效'
        },
        {
          name: "三房112901",
          address: "广东省",
          code: "zxj_3_f_n1129",
          type:'整装',
          status: '无效'
        },
        {
          name: "三房112901",
          address: "广东省",
          code: "zxj_3_f_n1129",
          type:'整装',
          status: '无效'
        },
        {
          name: "三房112901",
          address: "广东省",
          code: "zxj_3_f_n1129",
          type:'整装',
          status: '无效'
        },
        {
          name: "三房112901",
          address: "广东省",
          code: "zxj_3_f_n1129",
          type:'整装',
          status: '无效'
        }
      ]
    }
  },
  methods:{
    handleManage:(index,row)=>{
      console.log('管理index:'+index, row)
    },
    handleRelease:(index,row)=>{
      console.log('发布index:'+index, row)
    },
    handleEdit:(index,row)=>{
      console.log('编辑index:'+index, row)
    },
    handleDel:(index,row)=>{
      console.log('删除index:'+index, row)
    }
  }
}
</script>

子组件：

 1 <template>
 2   <div class=''>
 3     <el-table :data="list" style=" 100%" border>
 4       <template v-for="(item,index) in columns">
 5         <el-table-column :prop="item.prop" :key='item.label' :label="item.label" :align="item.align" :width="item.width"></el-table-column>
 6       </template>
 7       <el-table-column label="操作" align="center">
 8         <template slot-scope="scope">
 9           <el-button size="mini" v-for="(btn,index) in operates" :type="btn.type" :key="index" @click.native.prevent="btn.method(index,scope.row)">{{btn.label}}</el-button>
10         </template>
11       </el-table-column>
12     </el-table>
13   </div>
14 </template>
15   
16 <script>
17 export default {
18   props:{
19     list:{
20       type:Array,
21       default:[]
22     },
23     columns:{
24       type:Array,
25       default:[]
26     },
27     operates:{}
28   }
29 }
30 </script>