【el-table】表格要求内容固定高度，使用原生给计算高度

 

<template>
  <div class="content">
    <div class="content-div-style">
      <searchCom @searchChildFun="searchChildFun" ref="searchChildFun"></searchCom>
      <div class="table-div-project">
        <div class="title">
          <h3>共享资源列表</h3>
          <el-button type="primary" @click="ToNewProject">新增项目</el-button>
        </div>
        <el-table
          :data="tableData"
          style="width: 100%"
          stripe
          class="scrollbar-style"
          :style="{ minHeight: tableHeight + 80 + 'px' }"
          :header-cell-style="{ background: '#FAFAFA' }"
        >
          <template slot="empty">
            <div class="minHeight" :style="{ minHeight: tableHeight + 'px' }">
              <img src="../../assets/no-data.svg" alt="暂无数据" style="margin-top: 15%" />
              <p style="padding: 0; margin: 0; margin-top: -35px; margin-bottom: 20px">暂无数据</p>
            </div>
          </template>
          <el-table-column prop="name" label="培训项目" width="300" show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="collegeName" label="所属微学院" width="240" show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="orgName" label="所属部门" width="240" show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="expense" label="价格" width="120">
            <template slot-scope="scope">
              <span>{{ toFixed(scope.row.expense) }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="shareUserName"
            label="发起共享人"
            width="200"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column prop="shareStartTime" label="发起共享时间" width="170">
          </el-table-column>
          <el-table-column prop="shelfStatus" label="发布状态" width="110">
            <template slot-scope="scope">
              <div
                :style="{
                  color: showStateFun(scope.row.shelfStatus).statusColor,
                  backgroundColor: showStateFun(scope.row.shelfStatus).statusColor,
                }"
                class="status-icon"
              ></div>
              <span
                :style="{
                  color: showStateFun(scope.row.shelfStatus).statusColor,
                }"
                >{{ showStateFun(scope.row.shelfStatus).statusText }}</span
              >
            </template>
          </el-table-column>
          <el-table-column prop="isChecked" label="是否已发起验收" width="120"> </el-table-column>
          <el-table-column fixed="right" label="操作" width="280" align="center">
            <template slot-scope="scope">
              <el-button
                @click="shareFlagClick(scope.row.shareFlag)"
                :disabled="scope.row.shareFlag === 1"
                type="text"
                size="small"
                >分享报名</el-button
              >
              <span style="margin: 0px 10px">
                <el-button
                  type="text"
                  size="small"
                  v-if="scope.row.downFlag === 1"
                  @click="downFlagClick(scope.row.downFlag)"
                  >下架</el-button
                >
                <el-button
                  type="text"
                  size="small"
                  v-else
                  @click="downFlagClick(scope.row.downFlag)"
                  >上架</el-button
                ></span
              >
              <el-button
                @click="modifyPriceClick(scope.row.modifyPriceFlag)"
                :disabled="scope.row.modifyPriceFlag === 1"
                type="text"
                size="small"
                >修改价格</el-button
              >
              <el-button
                @click="launchCheckClick(scope.row.launchCheckFlag)"
                :disabled="scope.row.launchCheckFlag === 1"
                type="text"
                size="small"
                >发起验收</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
      <pagePagination :total="total" @pageChildFun="pageChildFun" ref="pageChildFun">
      </pagePagination>
      <gxprojectDialog ref="gxprojectDialog" @dialogToFun="dialogToFun"></gxprojectDialog>
    </div>
  </div>
</template>
<script>
  import searchCom from './components/search-com.vue'
  import pagePagination from './components/page-common.vue'
  import gxprojectDialog from './components/gxproject-dialog.vue'

  export default {
    name: 'GxCampTable',
    components: { searchCom, pagePagination, gxprojectDialog },
    data() {
      return {
        total: 100,
        params: {
          name: '',
          shareName: '',
          shelfStatus: '',
          isChecked: '',
          current: 1,
          size: 10,
        },
        tableData: [
          {
            name: '1上海市普陀区金沙江路 1518 弄上海市普陀区金沙江路 1518 弄',
            collegeName: '上海市普陀区金沙江路 1518 弄上海市普陀区金沙江路 1518 弄',
            orgName: '上海市普陀区金沙江路 1518 弄上海市普陀区金沙江路 1518 弄',
            expense: 18900,
            shareUserName: '上海市普陀区金沙江路 1518 弄',
            shareStartTime: '2022-11-22 :23:25:25',
            shelfStatus: 3,
            isChecked: '是',
            shareFlag: 0,
            downFlag: 1,
            modifyPriceFlag: 1,
            launchCheckFlag: 0,
          },
          {
            name: '2上海市普陀区金沙江路 1518 弄上海市普陀区金沙江路 1518 弄',
            collegeName: '上海市普陀区金沙江路 1518 弄上海市普陀区金沙江路 1518 弄',
            orgName: '上海市普陀区金沙江路 1518 弄上海市普陀区金沙江路 1518 弄',
            expense: 200,
            shareUserName: '上海市普陀区金沙江路 1518 弄',
            shareStartTime: '2022-11-22 :23:25:25',
            shelfStatus: 4,
            isChecked: '是',
            shareFlag: 0,
            downFlag: 1,
            modifyPriceFlag: 1,
            launchCheckFlag: 0,
          },
        ],
      }
    },
    computed: {
      tableHeight: function () {
        let height = document.documentElement.clientHeight
        return height - 450
      },
    },
    methods: {
      getGxListFun(params) {
        getGxList(params)
          .then((res) => {
            if (res.code === 200 && res.success && res.data && res.data.records) {
              const data = res.data
              this.tableData = data.records
              this.total = data.total
            } else {
              this.tableData = []
              this.total = 0
            }
          })
          .catch(() => {
            this.tableData = []
            this.total = 0
          })
      },
      showStateFun(val) {
        const statusObj = {
          statusText: '',
          statusColor: '',
        }
        if (val === 4) {
          statusObj.statusText = '上架失败'
          statusObj.statusColor = '#ff0000'
        } else if (val === 3) {
          statusObj.statusText = '上架中'
          statusObj.statusColor = '#409EFF'
        } else if (val === 2) {
          statusObj.statusText = '已下架'
          statusObj.statusColor = '#ff0000'
        } else if (val === 1) {
          statusObj.statusText = '已上架'
          statusObj.statusColor = '#00A854'
        }
        return statusObj
      },
      ToNewProject() {
        this.$nextTick(() => {
          this.$refs.gxprojectDialog.outerVisible = true
        })
      },
      //分享报名
      shareFlagClick(val) {
        console.log(val)
      },
      //下架1,上架0
      downFlagClick(val) {
        console.log(val)
      },
      //修改价格
      modifyPriceClick(val) {
        console.log(val)
      },
      //发起验收
      launchCheckClick(val) {
        console.log(val)
      },
      toFixed(num) {
        return parseFloat(num).toLocaleString('en', {
          minimumFractionDigits: 2,
          maximumFractionDigits: 2,
        })
      },
      //回调函数
      pageChildFun(val) {
        console.log(val)
      },
      searchChildFun(val) {
        val.isChecked = val.isChecked === '1' || val.isChecked === '0' ? Number(val.isChecked) : ''
        val.shelfStatus =
          val.shelfStatus === '1' || val.shelfStatus === '0' ? Number(val.shelfStatus) : ''
        console.log(val)
        console.log(this.params)
        this.params = { ...this.params, ...val }
        this.params.current = 1
        this.params.size = 10
        console.log(this.params)
      },
      //对话框
      dialogToFun() {
        this.params = {
          name: '',
          shareName: '',
          shelfStatus: '',
          isChecked: '',
          current: 1,
          size: 10,
        }
        this.$refs.searchChildFun.formInline = {
          name: '',
          shareName: '',
          shelfStatus: '',
          isChecked: '',
        }

        this.$refs.pageChildFun.pageObj = {
          current: 1,
          size: 10,
        }
        //调用接获取数据
      },
    },
    mounted() {
      console.log(document.documentElement.clientHeight)
      //this.getGxListFun(this.params)
      let height = document.documentElement.clientHeight
      let wrapperHeight = document.querySelector('.el-table__body-wrapper')
      if (wrapperHeight) {
        wrapperHeight.style.height = height - 450 + 'px'
      }
    },
  }
</script>
<style scoped lang="scss">
  .content {
    height: 100%;
    .content-div-style {
      background-color: #ffffff;
      padding: 10px 20px;
      box-sizing: border-box;
      width: 100%;
      height: 100%;
      //height: auto;
      background-color: #ffffff;
      .table-div-project {
        margin-top: 10px;
        margin-bottom: 10px;
        .title {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin: 10px 0px;
          h3 {
            font-size: 16px;
            color: #333333;
            font-weight: 700;
          }
          button {
            padding: 8px 15px;
          }
        }
      }
    }

    .status-icon {
      font-size: 28px;
      font-weight: bold;
      display: inline-block;
      vertical-align: initial;
      margin-right: 5px;
      width: 8px;
      height: 8px;
      border-radius: 50%;
    }
    .minHeight {
    }
  }
  ::v-deep .table-div-project button {
    font-size: 14px;
  }
  ::v-deep .el-table__body-wrapper {
    height: 300px;
  }
</style>
<style>
  .el-tooltip__popper.is-dark {
    background: #a4a6a9;
  }
  ::-webkit-scrollbar {
    /*滚动条整体样式*/
    width: 8px; /*高宽分别对应横竖滚动条的尺寸*/
    background-color: white;
    height: 8px;
    cursor: Pointer;
  }
  ::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    background: inset 0 0 0px white;
    box-shadow: inset 0 0 0px white;
    cursor: pointers;
    background-color: #d3d3d8;
    border-radius: 3px;
  }
  ::-webkit-scrollbar-thumb:hover {
    background-color: #bdbdc0;
  }
  ::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    border-radius: 3px;
    background: inset 0 0 0px white;
    box-shadow: inset 0 0 0px white;
    cursor: pointers;
  }
  .scrollbar-style {
  }
</style>