vue二次封装Element的table组件

效果图：

通过父子组件传值的方式

父组件：

  1 <template>
  2   <div class='test'>
  3     <material :list="list" :columns="columns" :operates="operates"/>
  4   </div>
  5 </template>
  6
  7 <script>
  8 import material from './table'
  9 export default {
 10   components:{
 11     material
 12   },
 13   data() {
 14     return {
 15       // 操作按钮
 16       operates:[
 17         {
 18           id:1,
 19           label:'管理',
 20           type:'info',
 21           method:(index,row)=>{
 22             this.handleManage(index, row)
 23           }
 24         },
 25         {
 26           id:1,
 27           label:'发布',
 28           type:'primary',
 29           method:(index,row)=>{
 30             this.handleRelease(index, row)
 31           }
 32         },
 33         {
 34           id:2,
 35           label:'编辑',
 36           type:'warning',
 37           method:(index,row)=>{
 38             this.handleEdit(index, row)
 39           }
 40         },
 41         {
 42           id:3,
 43           label:'删除',
 44           type:'danger',
 45           method:(index,row)=>{
 46             this.handleDel(index, row)
 47           }
 48         }
 49       ],
 50       columns:[
 51         {
 52           prop:'index',
 53           label:'序号',
 54           width:'80',
 55           align: 'center'
 56         },
 57         {
 58           prop:'code',
 59           width:'300',
 60           label:'产品编号',
 61           align: 'center'
 62         },
 63         {
 64           prop:'type',
 65           width:'200',
 66           label:'产品类型',
 67           align: 'center'
 68         },
 69         {
 70           prop:'name',
 71           width:'300',
 72           label:'产品名称',
 73           align: 'center'
 74         },
 75         {
 76           prop:'address',
 77           width:'200',
 78           label:'地区',
 79           align: 'center'
 80         },
 81         {
 82           prop:'status',
 83           width:'200',
 84           label:'状态',
 85           align: 'center'
 86         }
 87       ],
 88       list:[
 89         {
 90           name: "三房112901",
 91           provinceAreaName: "广东省",
 92           code: "zxj_3_f_n1129",
 93           type:'整装',
 94           status: '无效'
 95         },
 96         {
 97           name: "三房112901",
 98           provinceAreaName: "广东省",
 99           code: "zxj_3_f_n1129",
100           type:'整装',
101           status: '无效'
102         },
103         {
104           name: "三房112901",
105           provinceAreaName: "广东省",
106           code: "zxj_3_f_n1129",
107           type:'整装',
108           status: '无效'
109         },
110         {
111           name: "三房112901",
112           provinceAreaName: "广东省",
113           code: "zxj_3_f_n1129",
114           type:'整装',
115           status: '无效'
116         },
117         {
118           name: "三房112901",
119           provinceAreaName: "广东省",
120           code: "zxj_3_f_n1129",
121           type:'整装',
122           status: '无效'
123         }
124       ]
125     }
126   },
127   methods:{

128     handleEdit:(index,row)=>{
129       console.log('编辑index:'+index, row)
130     },
131     handleDel:(index,row)=>{
132       console.log('删除index:'+index, row)
133     }
134   }
135 }
136 </script>

子组件：

 1 <template>
 2   <div class=''>
 3     <el-table :data="list" style="width: 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>