yos_web/src/template/popoverTable/table.vue

<template>
  <div>
    <el-input v-if="isInput !== false" style="width:200px;" :placeholder="$t('搜索')" :suffix-icon="param.content.where.condition?param.content.where.condition.length > 0?'':'':'el-icon-search'" v-model="param.content.where.condition" @keyup.native.enter="listData(param.content.pageNumber = 1)" @clear="listData(param.content.pageNumber = 1)" size="small" class="input-with-select inline-16 layout_search__panel" clearable>
    </el-input>
    <el-table ref="table" :fit="tool.calculatedColumnWidth($refs.table,layout)" :row-class-name="tableClassName" highlight-current-row :data="list"  size="mini" :height="height ? height : list.length <= 5?'280px':'calc(100vh - 268px)'"  @row-click="rowClick" style="width:100%;margin-top: 10px" :header-cell-style="{height:'40px',color:'#606266',fontWeight:'400',fontSize:'14px'}"
              :cell-style="{height:'40px',color:'#666666',fontWeight:'400'}" border @selection-change="selectionChange" :row-key="rowKey">
      <el-table-column
          type="selection"
          width="35" fixed v-if="checkbox" :reserve-selection="reserveSelection">
      </el-table-column>
      <el-table-column  ref="table" show-overflow-tooltip v-for="(col,index) in layout" :key="col.tablecolid" :prop="col.columnname" :label="col.title" :min-width="col.width || 150" :fixed="fixedName ? fixedName.indexOf(col.columnname)!= -1?redirect ? redirect : 'right' :false : false">
        <template v-slot:header="{ column,$index }" v-if="customHeader">
          <slot name="header" :data="column"></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 class="container normal-panel" style="text-align:right;padding-bottom: 5px !important;" v-if="isPagination !== false">
      <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[20, 50, 100, 200]"
          :page-size="20"
          layout="total,sizes, prev, pager, next, jumper"
          :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  name: "table",
  props:['layout','custom','param','height','fixedName','width','checkbox','redirect','customHeader','prop','isInput','isPagination', 'rowKey', 'reserveSelection'],
  data () {
    return {
      list:[],
      currentPage:0,
      total:0
    }
  },
  watch:{
    list(val){
      this.doLayout()
    }
  },
  methods:{
    async listData(){
      const res = await this.$api.requested(this.param)
      this.list = res.data
      this.total = res.total
      this.currentPage = res.pageNumber
      this.$emit('listData',this.list)
    },
    rowClick (row) {
      this.$emit('rowClick',row)
    },
    tableClassName ({row,rowIndex}) {
      row.index = rowIndex
    },
    selectionChange(row){
      this.$emit('selectionChange',row)
    },
    doLayout(){
      if (this.$refs.table){
        this.$nextTick(()=>{
          this.$refs.table.doLayout()
        })
      }
    },
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.param.content.pageSize = val
      this.listData()
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.param.content.pageNumber = val
      this.listData()
    },
  },
  mounted () {
  }
}
</script>

<style scoped>

</style>