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>