element-table二次封装

封装

<template>
  <el-table :data="data" v-bind="attrs" >
    <el-table-column 
      v-for="(item,index) in columnOptions"
      :key="index" 
      :label="item.label" 
      :prop="item.prop"
      >
        <template slot-scope="scope">
          <slot :name="item.slotName?item.slotName:''" :row="scope.row" >
            {{scope.row[item.prop]}}
          </slot>
        </template>
      </el-table-column>
    <el-table-column label="操作">
      <template slot-scope="scope" >
        <slot name="operation" :row="scope.row">
          <el-button icon="el-icon-search" @click="search(scope.row)"></el-button>
          <el-button type="primary" icon="el-icon-edit" @click="edit(scope.row)" ></el-button>
          <el-button type="danger" icon="el-icon-delete" @click="deleteButton(scope.row)" ></el-button>
        </slot>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  props:{
    // 数据
    data:{
      type: Array,
      require: true,
    },
    // 列的属性数组
    columnOptions:{
      type: Array,
      require: true,
    },
    // element table 的属性
    attrs: Object,
  },
  methods:{
    // 删除按钮
    deleteButton(row){
      this.$emit('deleteBtn',row)
    },
    search(row){
      this.$emit("searchBtn",row)
    },
    edit(row){
      this.$emit("editBtn",row)
    },
  }
}
</script>

<style>

</style>

使用

<template>
  <div>
    <h1>table</h1>
    <Mytable :data="data" :attrs="attrs" :columnOptions="columnOptions" @deleteBtn="del" @searchBtn="searchBtn" @editBtn="editBtn">
      <template slot="statusName" slot-scope="scope">
        <el-tag
          :type="scope.row.status ? 'success' : 'danger'"
        >{{ scope.row.status ? "是" : "否" }}</el-tag>
      </template>
    </Mytable>
  </div>
</template>

<script>
import Mytable from './Mytable.vue';
export default {
  name:'test',
  components:{Mytable},
  data(){
    return {
      attrs: {
        border: true,
      },
      data: [
        {id:'001',title:'title11111',status:0,},
        {id:'002',title:'title22222',status:1,},
        {id:'003',title:'title33333',status:0,},
        {id:'004',title:'title44444',status:1,},
      ],
      columnOptions:[
        {label:'条目ID',prop:'id'},
        {label:'条目title',prop:'title'},
        {label:'条目status',prop:'status',slotName:'statusName'},
      ]
    }
  },
  methods:{
    del(row){
      console.log('del',row);
    },
    searchBtn(row){
      console.log('searchBtn',row);
    },
    editBtn(row){
      console.log('editBtn',row);
    },
  }
}
</script>

<style>

</style>

attrs  element table 的属性

columnOptions  配置列的属性

columnOptions 里的 slotName:'statusName'  可以配置具名插槽  有 scoped 数据

<template slot="statusName" slot-scope="scope">
  <el-tag
    :type="scope.row.status ? 'success' : 'danger'"
   >{{ scope.row.status ? "是" : "否" }}</el-tag>
</template>