yos_web/src/components/table/index6.vue

<template>
  <div>
    <!-- :header-cell-style="{background:'#EEEEEE',color:'#333'}" -->
    <el-table ref="table" :row-class-name="tableClassName" highlight-current-row :data="data"  size="mini"  :height="height ==''?data.length <= 4?'260px':data.length <= 20?'':'calc(100vh - 420px)':height"  @row-click="rowClick"
              style="width:100%;" :header-cell-style="{height:'40px',color:'#606266',fontWeight:'400',fontSize:'14px'}" tooltip-effect="dark"
              :cell-style="{height:'40px',color:'#666666',fontWeight:'400'}" border @selection-change="selectionChange" >
      <el-table-column
          type="selection"
          width="35" fixed v-if="checkbox">
      </el-table-column>
      <el-table-column  v-for="col in layout" :key="col.tablecolid" :prop="col.columnname" :label="col.title"  :width="col.width" :fixed="fixedName ? fixedName.indexOf(col.columnname)!= -1?'right':false : false">
        <template :slot="headerOptions ? headerOptions.includes(col.columnname) ? 'header' : '' : ''" slot-scope="scope">
          <slot name="header" :column="{data:scope.row,columnname:col.columnname}"></slot>
        </template>
        <template slot-scope="scope">
          <div class="table-panel">
            <!-- 自定义表格显示内容 -->
            <slot v-if="custom" name="customcol" :column="{data:scope.row,columnname:col.columnname}"></slot>
            <!-- 否则就是默认 -->
            <span v-else>{{scope.row[col.columnname]}}</span>
            <!-- 操作结构内容 -->
            <slot v-if="col.columnname === 'operation'" name="opreation" :data="scope.row"></slot>
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import {mapGetters} from "vuex"
export default {
  /*
    layout:表结构数据;
    data:表渲染数据;
    custom:是否启用自定义结构;
    opwidth:操作列宽度
  */
  props:['layout','data','custom','height','fixedName','width','checkbox','headerOptions'],
  data () {
    return {
      list:[],
      allArr:[],
      loading:false
    }
  },
  /*computed:{
    ...mapGetters({
      loading:'loading'
    })
  },*/
  methods:{
    rowClick (row) {
      this.$emit('rowClick',row)
    },
    tableClassName ({row,rowIndex}) {
      row.index = rowIndex
    },
    selectionChange(row){
      this.allArr = row
      this.$emit('selectionChange',row)
    }
  },
  mounted () {
  }
}

</script>
<style>
.el-tooltip__popper {
  max-width: 90%;
}
</style>
<style scoped>
  /deep/ .el-table--border .el-table__cell {
    /* border-right: 1px solid #ebeef5; */
  }
</style>