yos_web/src/components/normal-basic-layout/modules/table.vue

<template>
  <div class="bs-table" :style="{height:height?height:'calc(100vh - 330px)'}">
    <el-table border stripe ref="tables" :row-class-name="tableClassName" :header-cell-style="{background:'#fafafafa',height:'40px','color':'#000000'}" highlight-current-row :data="data" size="mini" @row-click="rowClick" height="100%" style="width:100%;" @selection-change="handleSelectionChange" >
      <!-- <div slot="empty">
        <el-empty :image="require('../../../assets/empty.svg')" :image-size="250">
        </el-empty>
      </div> -->
      <el-table-column
        type="selection"
        width="45"
        align="center"
        @handleSelectionChange="handleSelectionChange">
      </el-table-column>
      <el-table-column show-overflow-tooltip v-for="(col) in layout" :key="col.tablecolid" :prop="col.columnname" :label="col.title"  :min-width="col.width === 0 ? 150 : col.width" :fixed="checkFixed(col.columnname)">
        <template slot-scope="scope">

          <slot v-if="col.columnname !== 'operation'" name="customcol" :column="{data:scope.row,columnname:col.columnname}"></slot>

          <slot v-if="col.columnname === 'operation'" name="opreation" :data="scope.row"></slot>
        </template>
      </el-table-column>
      <!-- <el-table-column  v-for="(col) in layout" :key="col.tablecolid">
        <template #header>

          <el-input v-if="col.filter === 1" size="mini" v-model="col.value" @change="inputChange" @keyup.native.enter="headerSearch(col.columnname)" @clear="headerSearch(col.columnname)" clearable/>


        <slot v-if="col.filter === 2" name="temp" :data="col.columnname"></slot>

        </template>
        <el-table-column :prop="col.columnname" :label="col.title" :width="col.width ? col.width : 0" :min-width="col.width === 0 ? 150 : col.width" :fixed="checkFixed(col.columnname)">
          <template slot-scope="scope">
            <slot v-if="col.columnname !== 'operation'" name="customcol" :column="{data:scope.row,columnname:col.columnname}"></slot>
            <slot v-if="col.columnname === 'operation'" name="opreation" :data="scope.row"></slot>
          </template>
        </el-table-column>


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

<script>
import {mapGetters} from "vuex"
export default {
  /*
    layout:表结构数据;
    data:表渲染数据;
    custom:是否启用自定义结构;
    opwidth:操作列宽度
  */
  props:['data','tableName','custom','layout','fixRightData','fixLeftData','height'],
  data () {
    return {
      list:[],
      act_column:'',
      value:'',
      show:false
    }
  },
  computed:{
    ...mapGetters({
      loading:'loading'
    })
  },
  watch:{
    tableName () {
      this.$nextTick(() => {
        this.$refs.tables.doLayout()
      });
    },
    data(){
      this.$nextTick(() => {
        this.$refs.tables.doLayout()
      });
    }
  },
  methods:{
    rowClick (row) {
      this.$emit('rowClick',row)
    },
    tableClassName ({row,rowIndex}) {
      row.index = rowIndex
    },
    handleSelectionChange(val) {
      this.$emit('checkboxCallBack',val)
    },
    checkFixed (columnname) {
      let isRight = this.fixRightData.some(item=>item === columnname)
      let isLeft = this.fixLeftData.some(item=>item === columnname)
      if (isRight) return 'right'
      if (isLeft) return 'left'
    },
    headerSearch (columnname) {
      this.show = false
      this.$emit('headerSearch',columnname,this.value)
    },
    inputChange (val) {
      this.value = val
    }
  },
  mounted () {
  }
}

</script>
<style>
/* .bs-table .el-table {
  display: flex;
  flex-direction: column;
} */
</style>
<style scoped>
.search-icon:hover{
  font-weight: bold;
  background: #f1f2f3;
  cursor: pointer;
}

/deep/.ellipsis {
  display:-webkit-box;
  text-overflow:ellipsis;
  overflow:hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient:vertical;
}

/deep/.el-table--mini .el-table__cell {
  padding: 0 !important;
}
/deep/.el-table .el-table__cell {
  padding: 0 !important;
}
</style>