vue 基于element 封装table

在这里插入代码片
<template>
    <el-table
     :data="tableData"
     @select='selectCheng'
     @select-all='selectAll'
     @row-contextmenu='rowConten'
     :height="height"
     @row-click='rowClick'
     @cell-click="cellClick"
     stripe
     ref="dataTable"
     id="table"
      style="width: 100%;text-align:center">
        <!-- 多选框 -->
      <el-table-column  type="selection" width="55" ></el-table-column>
        <!-- <el-table-column  type="index" width="80" fixed class='xuhao' label="序号"></el-table-column> -->
      <template v-for="item in tableClomn">
        <el-table-column
          v-if="item.columnType==='slot'"
          :prop="item.keys"
          :label="item.title"
          :width="item.width"
          :key="item.key"
        >
          <template slot-scope="scope">
               <span v-if="scope.row.state === '显示中'" style="color:blue">●{{scope.row.state}}</span>
               <span v-else style="color:red">●{{scope.row.state}}</span>
          </template>
        </el-table-column>
        <el-table-column
          v-else-if="item.columnType==='img'"
           :prop="item.keys"
          :label="item.title"
          :width="item.width"
          :key="item.key"
        >
          <template slot-scope="scope">
              <img v-if="scope.row.image" style="width:50px;height:50px" :src="scope.row.image" alt="">
              <img v-if="scope.row.picture" style="width:50px;height:50px" :src="scope.row.picture" alt="">
          </template>
        </el-table-column>
          <el-table-column
          v-else-if="item.columnType==='state'"
           :prop="item.keys"
          :label="item.title"
          :width="item.width"
          :key="item.key"
        >
          <template slot-scope="scope">
              <span v-if="scope.row.state===1">正常</span>
              <span v-else style="color:#F4B100">停用</span>

          </template>
        </el-table-column>
        <el-table-column
          v-else
           :prop="item.keys"
          :label="item.title"
          :width="item.width"
          :key="item.key"
        ></el-table-column>
        
      </template>
         <el-table-column fixed="right" label="操作" width="150" v-if="hotspot">
             <template slot-scope="scope" >
              <el-button @click="listupdata(scope.row)" v-if="updata" icon="el-icon-edit" type="text" size="small">编辑</el-button>
              <el-button @click="listdel(scope.row)"  v-if="deletCat"  icon="el-icon-delete" type="text" size="small">删除</el-button>
              <el-button @click="listset(scope.row)"  v-if="setCat" icon="el-icon-setting" type="text" size="small">设置</el-button>
              <el-button @click="listdetails(scope.row)"  v-if="details" icon="el-icon-setting" type="text" size="small">详情</el-button>
              <el-button @click="listbinding(scope.row)"  v-if="binding" icon="el-icon-setting" type="text" size="small">绑定</el-button>
              <el-button @click="listjurisdiction(scope.row)"  v-if="jurisdiction" icon="el-icon-setting" type="text" size="small">权限</el-button>
              <el-dropdown @command='dropDownClick' @click="dropDownClick(scope.row)" v-if="dropdown" trigger="click" :id='scope.row.id'>
                  <span class="el-dropdown-link">
                  详情<i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item command='a' :id='scope.row.id' >合作商订单列表</el-dropdown-item>
                    <el-dropdown-item command='b' :id='scope.row.id' >司机订单列表</el-dropdown-item>
                    <el-dropdown-item command='c' :id='scope.row.id' >下级人员列表</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>

            </template>
    </el-table-column>
    </el-table>
</template>

  <script>
  import { Loading } from 'element-ui';
export default {
    name:'tableClis',
    props:{
        tableData:{
            type:Array,
            default:()=>[]
        },
        tableClomn:{
            type:Object,
            default:()=>{}
        },
        height:{
          type:Number,
          default:500
        },
        setCat:{
           type:Boolean,
           default:true
        },
        hotspot:{
           type:Boolean,
           default:false
        },
        deletCat:{
            type:Boolean,
            default:true
        },
        details:{
           type:Boolean,
           default:false
        },
        updata:{
          type:Boolean,
           default:true
        },
        binding:{
           type:Boolean,
           default:false
        },
        jurisdiction:{
            type:Boolean,
            default:false
        },
        dropdown:{
           type:Boolean,
            default:false
        }
      
    },
  data() {
    return {
        key:[],
        loadingInstance:[]
      
    };
  },
  created(){},
  methods:{
      loding(){
        this.$nextTick(()=>{
          const options = {
            target:this.$refs.dataTable.$el
          }
           this.loadingInstance = Loading.service(options);
        })
      },
      clearLoding(){
      this.$nextTick(() => { // 以服务的方式调用的 Loading 需要异步关闭
        this.loadingInstance.close();
      });
      },
      handleData(val){
        console.log(this.tableData)
      },
      //复选框选中获取当亲数据
      selectCheng(val){
          this.$emit('selechange',val)
      },
      selectAll(val){
        this.$emit('selechange',val)
      },
      //鼠标右键方法
      rowConten(val){
          console.log(val)
      },
      //双击当前行获取数据方法
      rowClick(val){
         this.$emit('rowClick',val)
      },
      //点击单元格方法
      cellClick(row, column, cell, event){
        this.$emit('cellClick',row, column.property)
        // console.log(row, column.property, cell, event,11)
      },
      
      listset(val){  //设置
        this.$emit('tableset',val)
      },
      listupdata(val){  //修改
        this.$emit('tableupdata',val)
      },
      listdel(val){  //删除
        this.$emit('tableDel',val)
      },
      listdetails(val){ //详情
           this.$emit('tabledetails',val)
      },
      listbinding(val){
           this.$emit('tablebinding',val)
      },
      listjurisdiction(val){
           this.$emit('tablejurisdiction',val)
      },
      dropDownClick(val,item){
        switch(val){
          case 'a':
            this.$router.push({name:"PromotionOrder",query:{id:item.$el.id}})
          break;
          case 'b':
            this.$router.push({name:"viporder",query:{id:item.$el.id}})
          break;
           case 'c':
            this.$router.push({name:"lower",query:{id:item.$el.id}})
          break;

        }
        console.log(val,item.$el.id,11111)
      }
  },
};
</script>
<style lang="less" scoped>
 .el-dropdown-link {
    cursor: pointer;
    color: #409EFF;
  }
  .el-icon-arrow-down {
    font-size: 12px;
  }
  .demonstration {
    display: block;
    color: #8492a6;
    font-size: 14px;
    margin-bottom: 20px;
  }

</style>