yos_web/src/HDrpManagement/customerPortrait/modules/pageTable.vue

<template>
  <div>
    <div>
      <tableLayout :layout="tablecols" :data="list2" :opwidth="200"  :custom="true" :width="false" fixedName="operation" :customHeader="true">
        <template v-slot:header="data">
          <div v-if="data.data.label == '综合折扣'" style="display:flex;align-items:center">
            <span>{{ data.data.label }}</span>
            <el-tooltip class="item" effect="dark" content="综合折扣=（产品明细平均折扣+产品类别平均折扣）÷2×100%" placement="top">
              <i class="el-icon-warning-outline" style="margin-left:10px;cursor: pointer;"></i>
            </el-tooltip>
          </div>
          <div v-else>
            <span>{{ data.data.label }}</span>
          </div>
        </template>
        <template v-slot:customcol="scope">
          <slot v-if="custom" name="custom" :data="scope.column"></slot>
          <div v-else>
            <div v-if="scope.column.columnname == 'stagecount'">
              <el-tag size="small" v-for="(item,index) in scope.column.data.stagecount" :key="index">{{ item.stagename }}</el-tag>
            </div>
            <div v-else>
              {{ scope.column.data[scope.column.columnname] }}
            </div>
          </div>
          
        </template>
      </tableLayout>
    </div>
    <div style="margin-top:16px;text-align:right">
      <el-pagination
          background
          small
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="param.content.pageNumber"
          :page-sizes="[20, 50, 100, 200]"
          layout="total,sizes, prev, pager, next, jumper"
          :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  props:["tablecols",'param','custom'],
  data () {
    return {
      list:[],
      list2:[],
      total:0,
      options:[
      ],
    }
  },
  methods:{
    async listData(){
      const res = await this.$api.requested(this.param)
      this.list = res.data
      this.list2 = res.data.length && res.data[0].isEmpty ? [] : res.data
      this.total = res.data.length && res.data[0].isEmpty ? 0 : res.total
      console.log(this.list)
    },
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.param.content.pageSize = val
      this.listData()
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.param.content.pageNumber = val
      this.listData()
    },
  },
  created() {
    this.listData()
  }
}

</script>
<style scoped>

</style>