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:'序號',
          width:'80',
          align: 'center'
        },
        {
          prop:'code',
          width:'300',
          label:'產品編號',
          align: 'center'
        },
        {
          prop:'type',
          width:'200',
          label:'產品類型',
          align: 'center'
        },
        {
          prop:'name',
          width:'300',
          label:'產品名稱',
          align: 'center'
        },
        {
          prop:'address',
          width:'200',
          label:'地區',
          align: 'center'
        },
        {
          prop:'status',
          width:'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>

 

 

 

子組件：

<template>
  <div class=''>
    <el-table :data="list" style="width: 100%" border>
      <template v-for="(item,index) in columns">
        <el-table-column :prop="item.prop" :key='item.label' :label="item.label" :align="item.align" :width="item.width"></el-table-column>
      </template>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <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>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
  
<script>
export default {
  props:{
    list:{
      type:Array,
      default:[]
    },
    columns:{
      type:Array,
      default:[]
    },
    operates:{}
  }
}
</script>