[备忘]element2.x Card和Table都设置高度

• el-card 要设置高度
• el-table 要设置高度

<template>
  <el-card class="wait-task-user-box-card">
    <!-- style="padding-top: 10px; padding-left: 10px;" -->
    <div class="opt-task-panel">
      <!-- 查询区域 -->
      <div style="border-bottom: 1px solid #d4d2d2;">
        <el-form inline>
          <el-form-item label="客户名称：">
            <el-input style="width: 180px" v-model="companyName" clearable></el-input>
          </el-form-item>
          <el-form-item label="地址：">
            <el-cascader v-model="cascade_value" :props="cascade_props" @change="handlerCascadeChange"
                         style="width: 330px">
            </el-cascader>
          </el-form-item>
          <el-form-item label="">
            <el-button type="primary" @click="handleSearch">查询</el-button>
          </el-form-item>
        </el-form>
        <el-checkbox v-model="stateFlag" style="margin: 5px 5px 10px 0;font-weight: bold;">过滤正在分配中的客户</el-checkbox>
      </div>


      <!-- table -->
      <el-table :data="tableData" :height="tableHeight">
        <el-table-column type="expand">
          <template slot-scope="props">
            <div v-for="(item, index) of fieldLabelArr" :key="index">
              <span :class="{'field-bold': should_filed_bold(fieldKeyArr[index])}">
                {{ item + '：' }}</span><span>{{ props.row[fieldKeyArr[index]] }}
              </span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="客户名称" prop="companyName" style="width: 10%;"></el-table-column>
        <el-table-column label="" style="width: 10%;">
          <!-- slot-scope="props" -->
          <template slot-scope="props">
            <el-button type="primary" v-if="!props.row['state']" @click="handleTaskAdd(props.row)">分配</el-button>
            <template v-else>
              <el-button v-if="props.row['state'] == 'VALID'" @click="handleTaskCancel(props.row['taskId'])"
                         style="background-color: orange;border-color: orange;">取消任务</el-button>
              <span v-if="props.row['state'] == 'CANCEL'">已取消</span>
            </template>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页条 -->
      <el-pagination layout="prev, pager, next" @current-change="handleCurrentChange"
                     :current-page.sync="currentPage" :total="total" :page-size="pageSize"
                     style="margin: 10px 0 5px 0">
      </el-pagination>

    </div>
  </el-card><!--root-->
</template>
<script>
import { base_url } from "@/common/constant";
import axios from "axios";
export default {
  mame: 'OptTaskPanel',
  props: ['user_num'],
  data() {
    return {
      tableData: [],//table数据
      cascade_value: [],
      //cascade_options: [],
      cascade_props: {
        lazy: true,
        checkStrictly: true, //可以选择任意节点
        expandTrigger: 'click', //click/hover
        async lazyLoad(node, resolve) {
        },
      },
    }
  },//data
  computed: {
    addr(){
      return `${this.city ? this.city : ''}${this.district ? this.district : ''}${this.street ? this.street : ''}`
    },
    tableHeight(){
      // top:60, tab:60, btn:60, 分页:60 ;
      return window.innerHeight - 60 - 10 - 60 - 60 - 40;
    },
  },
  async created() {
    this.limitStart = 0;
    this.currentPage = 1;
  },
  methods: {

    //级联选择器——change
    handlerCascadeChange(value){
      if (value) {
        this.province = value[0] || undefined;
        this.city = value[1] || undefined;
        this.district = value[2] || undefined;
        this.street = value[3] || undefined;
      }
    },

  },//methods
}
</script>
<style lang="scss" scoped>
</style>
<style lang="scss">
.wait-task-user-box-card {
  height: calc(100vh - 60px - 10px);
}
</style>

微信截图_20220328105831.png

• 如上图，两边都是使用 card 的
• 右边的talbe是有默认高度的，这样，数据溢出会在此 table 内上下滚动，而不影响其他的布局

End