在表格外部包一层div，设置div高度，el-table高度设置100%,动态计算div的高度

<div :style="{height:tableHeight}">
    <el-table height="100%"></<el-table>
</div>

1.创建 tableMixin.js

export default {
    computed: {
        tableHeight() {
            // 底部50 头部60 分页40 搜索栏50 
            
            // 获取滚动条高度（宽度）
            let scrollBarHeight = this.getScrollbarWidth()

            // 当屏幕宽度小于1600时候减去滚动条的高度
            if (document.body.clientWidth < 1600) {
                return `calc(100vh - 200px - ${scrollBarHeight}px)`
            } else {
                return "calc(100vh - 200px)"
            }
        },
    },
    methods: {
        // 获取滚动条宽度
        getScrollbarWidth() {
            var odiv = document.createElement('div'),//创建一个div
                styles = {
                    width: '100px',
                    height: '100px',
                    overflowY: 'scroll' //让div有滚动条
                }, i, scrollbarWidth;
            for (i in styles) odiv.style[i] = styles[i];
            document.body.appendChild(odiv);//把div添加到body中
            scrollbarWidth = odiv.offsetWidth - odiv.clientWidth;//相减
            console.log(odiv.offsetWidth)
            console.log(odiv.clientWidth)
            odiv.remove();//移除创建的div
            return scrollbarWidth;//返回滚动条宽度
        },
    }
}

2.在页面引用

import tableMixin from "@/mixin/tableMixin";
export default {
  mixins:[tableMixin],
}

全局汇入

//main.js
import tableMixin from "@/mixin/tableMixin";
Vue.mixin(tableMixin)

第二种方法

mixin/tableMixin.js

export default {
    data() {
        return { tableHeight: "", }
    },
    methods: {
        // 获取滚动条宽度
        getScrollbarWidth() {
            var odiv = document.createElement('div'),//创建一个div
                styles = {
                    width: '100px',
                    height: '100px',
                    overflowY: 'scroll' //让div有滚动条
                }, i, scrollbarWidth;
            for (i in styles) odiv.style[i] = styles[i];
            document.body.appendChild(odiv);//把div添加到body中
            scrollbarWidth = odiv.offsetWidth - odiv.clientWidth;//相减
            odiv.remove();//移除创建的div
            return scrollbarWidth;//返回滚动条宽度
        },
        getTableHeight() {
            // 底部50 头部60 分页40 搜索栏50 
            let scrollBarHeight = this.getScrollbarWidth()

            // 当屏幕宽度小于1600时候减去滚动条的高度
            if (document.body.clientWidth < 960) {
                this.tableHeight = `calc(100vh - 200px - ${scrollBarHeight}px)`
            } else {
                this.tableHeight = "calc(100vh - 200px)"
            }
        }
    },
    mounted() {
        this.getTableHeight();
    }
}

index.vue

<template>
  <d2-container>
    <!-- 新增按钮 -->
    <div style="display:flex;justify-content: space-between;height:50px;align-items: center;">
      <ul class="searchUL" style="marign-right: 300px">
        <li v-for="(item, index) in searchButton" :key="index" @click="titleGoto(item)">
          {{ item }}
        </li>
      </ul>

      <div style="flex: 1;
    display: flex;
    justify-content: flex-end;
    padding-right: 20px;">
      
        <el-select style="width: 130px;margin-right: 15px;" v-model="formSearch.style" size="mini" clearable placeholder="选择风格" @change="getTableList(1)">
          <el-option v-for="(item, index) in styleOutOptions" :key="index" :label="item.StyleNameCN" :value="item.ID">
          </el-option>
        </el-select>

        <el-select style="width: 130px;margin-right: 15px;" v-model="formSearch.sex" size="mini" clearable placeholder="选择性别" @change="getTableList(1)">
          <el-option v-for="(item, index) in sexOutOptions" :key="index" :label="item.GroupNameCN" :value="item.ID">
          </el-option>
        </el-select>


        <el-select style="width: 130px;margin-right: 15px;" v-model="formSearch.cate" size="mini" clearable placeholder="选择品类" @change="getTableList(1)">
          <el-option v-for="(item, index) in cateOutOptions" :key="index" :label="item.ProductName" :value="item.ProductID">
          </el-option>
        </el-select>

        <el-input style="width: 230px;margin-right: 15px;" placeholder="项名称" @keyup.enter.native='getTableList(1)' v-model.trim="formSearch.searchText" size="mini" clearable>
          <el-button slot="append" icon="el-icon-search" @click="getTableList(1)"></el-button>
        </el-input>
      </div>
    </div>
    <!-- 表格 -->
    <el-table :height="tableHeight" v-loading="isLoading" element-loading-text="加载中，请稍后..." :data="tableData" border style="width: 100%" :header-cell-style="headFirst" ref="multipleTable" row-key="ID" :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
      @selection-change="handleSelectionChange">
      <el-table-column align="center" label="序号"  min-width="30%">
         <el-table-column type="selection" align="right"></el-table-column>
          <el-table-column type="index" :index="indexMethod"> </el-table-column>
      </el-table-column>
      <el-table-column prop="ProdectStyleName" label="风格"></el-table-column>
      <el-table-column prop="ProductGroupName" label="男/女/童装"></el-table-column>
      <el-table-column prop="ProdectName" label="品类"></el-table-column>
      <el-table-column prop="NameCN" label="中文名"></el-table-column>
      <el-table-column prop="NameEN" label="英文名"></el-table-column>
      <!-- <el-table-column prop="DisplayOrder" label="排序"></el-table-column> -->
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="text" size="mini" @click="look(scope.row)" style="color: #666666">配置</el-button>
          <span style="margin: 0px 5px">|</span>
          <el-button type="text" size="mini" @click="edit(scope.row)" style="color: #666666">编辑</el-button>
          <span style="margin: 0px 5px">|</span>
          <el-button type="text" size="mini" @click="changeStus(scope.row)" style="color: #666666">{{ scope.row.IsNotEnable ? "启用" : "禁用" }}</el-button>
          <span style="margin: 0px 5px">|</span>
          <el-button type="text" size="mini" @click="labelSet(scope.row)" style="color: #666666">标签</el-button>
          <span style="margin: 0px 5px" v-if="scope.row.FID === 0">|</span>
          <el-button style="color: #666666" type="text" size="mini" @click="addSubItem(scope.row)" v-if="scope.row.FID === 0">新增子项</el-button>
          <img class="moveupImg" v-show="
              formSearch.style != '' ||
              formSearch.sex != '' ||
              formSearch.cate != ''
            " src="../../pageManagement/moduleManagement/imgs/arrow-moveup-g.png" alt="" />
          <img style="vertical-align: middle" v-show="
              formSearch.style != '' ||
              formSearch.sex != '' ||
              formSearch.cate != ''
            " src="../../pageManagement/moduleManagement/imgs/arrow-movedown-g.png" alt="" />
        </template>
      </el-table-column>
    </el-table>

    <!-- 弹出 -->
    <el-dialog :title="'下单选项' + tip" :visible.sync="dialogVisible" :close-on-click-modal="false">
      <el-form ref="form" :model="form" :rules="rules" label-width="120px">
        <el-row>
          <el-col :span="interval">
            <el-form-item label="风格" prop="style">
              <el-select v-model="form.style" style="width: 100%" @change="selectStyle" :disabled="rowData !== ''">
                <el-option v-for="(item, index) in styleOptions" :key="index" :label="item.StyleNameCN" :value="item.StyleID">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="interval">
            <el-form-item label="性别" prop="sex">
              <el-select v-model="form.sex" style="width: 100%" @change="selectSex" :disabled="rowData !== ''">
                <el-option v-for="(item, index) in sexOptions" :key="index" :label="item.SexNameCN" :value="item.SexID">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="interval">
            <el-form-item label="品类" prop="cate">
              <el-select v-model="form.cate" style="width: 100%" :disabled="isAddSub">
                <el-option v-for="(item, index) in cateOptions" :key="index" :label="item.ProdectNameCN" :value="item.ProdectID">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="interval" v-if="isAddSub">
            <el-form-item label="主项名称">
              <el-input v-model="rowData.NameCN" style="width: 100%" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="interval">
            <el-form-item label="中文名">
              <el-input v-model="form.nameCN" style="width: 100%"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="interval">
            <el-form-item label="英文名">
              <el-input v-model="form.nameEN" style="width: 100%"></el-input>

            </el-form-item>
          </el-col>
          <!-- <el-col :span="20">
            <el-form-item label="面辅料">
              <el-radio-group v-model="form.isMian">
                <el-radio :label="true">是</el-radio>
                <el-radio :label="false">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col> -->
          <el-col :span="interval" v-if="showSenior">
            <el-form-item label="高级设计">
              <el-radio-group v-model="form.isSenior">
                <el-radio :label="true">是</el-radio>
                <el-radio :label="false">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="是否必选">
              <el-radio-group v-model="form.Isrequired">
                <el-radio :label="true">是</el-radio>
                <el-radio :label="false">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="排序">
              <el-input v-model="form.sort" style="width: 23%"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item>
              <el-button  class="baocun" @click="cancel" size="small" >取消</el-button>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item>
              <el-button  class="baocun" @click="save" size="small" >保存</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-dialog>

    <!-- 弹出标签 -->
    <el-dialog title="标签" :visible.sync="dialogTagVisible" :close-on-click-modal="false">
      <el-form label-width="120px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="中文标签">
              <el-input v-model="formTag.tagCN" placeholder="标签中文" style="width: 50%; margin-right: 10px"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="英文标签">
              <el-input v-model="formTag.tagEN" placeholder="标签英文" style="width: 50%; margin-right: 20px"></el-input>
              <el-button type="primary" @click="addTag" size="small">新增标签</el-button>
            </el-form-item>
          </el-col>
          <el-col :span="20">
            <el-form-item label="当前标签">
              <el-tag style="margin-right: 10px" v-for="(tag, index) in nowTags" :key="index" @close="closeTag(1, tag, index)" closable>
                {{ tag.name }}
              </el-tag>
            </el-form-item>
          </el-col>
          <!-- <el-col :span="20">
            <el-form-item label="已删除标签">
              <el-tag
                style="margin-right: 10px"
                v-for="(tag, index) in deleteTags"
                :key="index"
                @close="closeTag(2, tag, index)"
                closable>
                {{tag.name}}
              </el-tag>
            </el-form-item>
          </el-col> -->

          <el-col :span="12">
            <el-form-item>
              <el-button type="primary"  class="baocun"@click="cancelLabel" size="small">取消</el-button>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item>
              <el-button type="primary"  class="baocun"@click="saveLabel" size="small">保存</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-dialog>

    <!-- 分页 -->
      <div class="pagination_wrap">
        <span >已选{{checkNum}}项</span>
        <el-pagination class="pagination"  @current-change="handleCurrentChange" @size-change="handleSizeChange" :page-sizes="[5 ,15, 20, 30, 40]"
          :page-size="pageSize" :current-page="currentPage" layout="total, sizes, prev, pager, next, jumper" :total="totalCount">
        </el-pagination>
      </div>
  </d2-container>
</template>

<script>
import log from "@/libs/util.log";
export default {
  name: "systemsettings-orderoptions",
  data() {
    return {
      isLoading:true,
      checkNum: 0,
      flag: true,
      quanxuanClass: 0,
      interval: 8, //弹出框显示每行显示两个元素
      pageSize: 15,
      currentPage: 1,
      totalCount: 2,
      dialogVisible: false,
      dialogTagVisible: false,
      styleOutOptions: [],
      sexOutOptions: [],
      cateOutOptions: [],
      styleOptions: [],
      sexOptions: [],
      cateOptions: [],
      tableData: [],
      form: {
        style: "",
        sex: "",
        cate: "",
        nameCN: "",
        nameEN: "",
        // isMian: '',
        isSenior: "",
        sort: "0",
        Isrequired:''
      },
      formSearch: {
        style: "",
        sex: "",
        cate: "",
        searchText: "",
      },
      searchButton: ["全选", "新增", "删除"],
      formTag: {
        tagCN: "",
        tagEN: "",
      },
      nowTags: [], // 标签数组
      deleteTags: [{ name: "H | H" }, { name: "E | E" }],
      rules: {
        style: [{ required: true, message: "请选择", trigger: "blur" }],
        sex: [{ required: true, message: "请选择", trigger: "blur" }],
        cate: [{ required: true, message: "请选择", trigger: "blur" }],
      },
      rowData: "", // 行数据
      tip: "", // 弹窗提示
      showSenior: false, // 弹窗显示高级设计选项
      isAddSub: false, // 是否是新增子项
    };
  },
     created(){
    let _this = this;
    document.onkeydown = function(e){
      let key = window.event.keyCode;
      if(key == 13){
        _this.getTableList(1);
      }
    }
  },
  destroyed(){
    document.onkeydown = null;
  },
  mounted() {
    this.getTableList();
    let _this = this;
    window.onresize = function () {
      _this.getTableHeight()
    }
  },
  methods: {
        indexMethod(index){
      return (this.currentPage-1)*this.pageSize+index+1
    },
    //合并单元格
    headFirst({ row, colunm, rowIndex, columnIndex }) {
      if (rowIndex === 1) {
        //这里为了是将第二列的表头隐藏，就形成了合并表头的效果
        return { display: "none" };
      }
     return "background:#ebf1f6;font-size:14px;font-weight:bold;line-height:32px;text-align:center;borderColor:#cfd7e5;color:#666666"
    },
    cancel() {
      this.dialogVisible = false;
    },
    // 获取列表
    async getTableList(type) {
      this.isLoading=true
      this.currentPage = type === 1 ? 1 : this.currentPage;
      let data = {
        ProductStyleID: this.formSearch.style,
        ProductGroupID: this.formSearch.sex,
        ProductID: this.formSearch.cate,
        gic: this.formSearch.searchText,
        Page: {
          currentIndex: this.currentPage,
          pageSize: this.pageSize,
        },
      };
      const result = await this.$request.getOrderOptionListData(data);
      this.isLoading=false
      this.tableData = result.StyleDesignList;
      this.tableData.forEach((ele) => {
        if (ele.StyleStyleDesign_FIDList) {
          ele.children = ele.StyleStyleDesign_FIDList;
        }
      });
      // 0是一级
      // 子级数据 StyleStyleDesign_FIDList
      // let children = [{ID:2,Name:'gaoaho'}]
      // this.tableData.push()
      // this.tableData.forEach(el=>{
      //   el.children = children
      // })
      this.totalCount = result.totalRowCount;
      this.styleOutOptions = result.ProductStyleModelList; // 外部搜索选项
      this.sexOutOptions = result.ProductGroupModelList;
      this.cateOutOptions = result.ProductModelList;
      this.styleOptions =
        result.VProduct_MenuStyleResponse.Product_MenuStyleList; // 弹窗里的选项
    },
    // 新增按钮
    add() {
      this.dialogVisible = true;
      this.showSenior = true;
      this.isAddSub = false;
      this.rowData = "";
      this.tip = "-新增客户端左侧下单项";
      this.form = {
        style: "",
        sex: "",
        cate: "",
        nameCN: "",
        nameEN: "",
        // isMian: false,
        isSenior: false,
        sort: "0",
      };
    },
    // 添加右侧子项
    addSubItem(row) {
      this.interval = 12;
      this.dialogVisible = true;
      this.showSenior = false;
      this.isAddSub = true;
      this.rowData = row;
      this.tip = "-新增客户端右侧下单项";
      this.selectStyle(row.ProdectStyleID); // 性别选项赋值
      this.selectSex(row.ProductGroupID); // 品类选项赋值
      this.form.style = row.ProdectStyleID;
      this.form.sex = row.ProductGroupID;
      this.form.cate = row.ProdectID;
      this.form.nameCN = "";
      this.form.nameEN = "";
      this.form.isSenior = false;
      this.form.sort = "";
    },
    // 查看 进入二级项
    look(row) {
      // if (row.FID != 0) {
      sessionStorage.setItem("orderOptionStyle", JSON.stringify(row));
      this.$router.push({
        name: "systemsettings-orderoptions-secondaryitem",
      });
      // } else {
      //   this.labelSet(row);
      // }
    },
    // 编辑
    edit(row) {
      this.form.Isrequired = row.Isrequired
      this.interval = 8;
      this.dialogVisible = true;
      this.showSenior = row.FID == 0;
      this.isAddSub = false;
      this.tip = `-修改客户端${row.FID == 0 ? "左" : "右"}侧下单项`;
      this.rowData = row;
      this.selectStyle(row.ProdectStyleID); // 性别选项赋值
      this.selectSex(row.ProductGroupID); // 品类选项赋值
      this.form.style = row.ProdectStyleID;
      this.form.sex = row.ProductGroupID;
      this.form.cate = row.ProdectID;
      this.form.nameCN = row.NameCN;
      this.form.nameEN = row.NameEN;
      // this.form.isMian = row.IsFabrics
    
      this.form.isSenior = row.IsAdvanced === 1;
      this.form.sort = row.DisplayOrder;
    },

    // 启用 禁用
    changeStus(row) {
      this.$confirm(`此操作将${row.IsNotEnable ? "启用" : "禁用"}, 是否继续?`, {
        type: "warning",
      })
        .then(async () => {
          let data = {
            StyleID: row.ID,
            IsNotEnable: row.IsNotEnable,
          };
          const result = await this.$request.changeOrderOptionStatusData(data);
          this.$message.success("修改成功");
          this.getTableList(); // 刷新table
        })
        .catch(() => {});
    },

    // 全选事件
    quanXuan() {
      // 触发全选事件
      if (this.quanxuanClass == 0) {
        // 如果当前是没有全选点击之后变成全选1
        this.quanxuanClass = 1;
        this.tableData.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row, true);
        });
      } else if (this.quanxuanClass == 1) {
        // 如果当前是全选的点击之后变不全选0
        this.quanxuanClass = 0;
        this.tableData.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row, false);
        });
      }
    },
    // 操作
    titleGoto(data) {
      if (data == "全选") {
        this.quanXuan();
      } else if (data == "新增") {
        // this.type = "新增";
        // this.dialogVisible = true;
        // var parameter = {
        //   Id: 0,
        // };
        // this.$request.getCustomerRuleModelById(parameter).then((res) => {
        //   this.CustomerTypeList = res.CustomerTypeList;
        //   this.CustomerLevelList = res.CustomerLevelList;
        //   this.GradingStandardList = res.GradingStandardList; //定级标准
        // });
        this.add();
      } else if (data == "删除") {
        // 批量删除
        if (this.checkNum1 > 0) {
          this.deleteNoticeListData();
        } else {
          this.$message({ type: "error", message: "请先勾选条目" });
        }
      }
    },
    // 取消标签弹窗
    cancelLabel() {
      this.dialogTagVisible = false;
    },
    saveLabel() {
      this.dialogTagVisible = false;
    },
    // 弹出保存
    save() {
      this.$refs["form"].validate(async (valid) => {
        if (valid) {
          let data = {
            AddType: this.isAddSub,
            FID: this.isAddSub ? this.rowData.ID : 0,
            StyleID: this.rowData && !this.isAddSub ? this.rowData.ID : "",
            ProductStyleID: this.form.style,
            ProductGroupID: this.form.sex,
            ProductID: this.form.cate,
            NameCN: this.form.nameCN,
            NameEN: this.form.nameEN,
            IsAdvanced: this.form.isSenior ? 1 : 0,
            DisplayOrder: this.form.sort,
            Isrequired:this.form.Isrequired,
            IsFabrics:
              this.form.nameCN === "面料" ||
              this.form.nameCN === "里布" ||
              this.form.nameCN === "纽扣",
          };
          const result = await this.$request.postOrderOptionData(data);
          this.dialogVisible = false;
          this.$message.success("保存成功");
          this.getTableList(); // 刷列表
        }
      });
    },
    // 标签
    async labelSet(row) {
      this.dialogTagVisible = true;
      this.rowData = row;
      let data = {
        DesigonID: row.ID,
      };
      const result = await this.$request.getOrderOptionTagData(data);
      this.nowTags = result.V_LabelOptionList.map((item) => {
        return {
          ID: item.ID,
          name: item.NameCN + " | " + item.NameEN,
        };
      });
      // this.$router.push({ name: "systemsettings-hotstyle-styleorderoptions" });
    },
    // 新增标签
    async addTag() {
      if (this.formTag.tagCN && this.formTag.tagEN) {
        // this.nowTags.push(
        //   {
        //     name: this.formTag.tagCN + ' | ' + this.formTag.tagEN
        //   }
        // )
        let data = {
          DesigonID: this.rowData ? this.rowData.ID : "",
          LableName: this.formTag.tagCN,
          LableNameEN: this.formTag.tagEN,
        };
        const result = await this.$request.postOrderOptionTagData(data);
        this.$message.success("新增成功");
        this.labelSet(this.rowData);
        this.formTag = {
          tagCN: "",
          tagEN: "",
        };
      } else {
        this.$message.warning("请填写完整中英文");
      }
    },
    // 删除现有标签
    async closeTag(type, tag, index) {
      if (type === 1) {
        // 点当前
        // this.nowTags.splice(index, 1)
        let data = {
          LableID: tag.ID,
        };
        const result = await this.$request.deleteOrderOptionTagData(data);
        this.$message.success("删除成功");
        this.labelSet(this.rowData);
      }
      // else if (type === 2) { // 点已删除
      //   this.deleteTags.splice(index, 1)
      //   this.nowTags.push(tag)
      // }
    },
    // 选择风格是获取性别选项
    selectStyle(e) {
      this.sexOptions = this.styleOptions.find(
        (a) => a.StyleID === e
      ).Product_MenuSexList;
    },
    // 选择性别时获取品类选项
    selectSex(e) {
      this.cateOptions = this.sexOptions
        .find((a) => a.SexID === e)
        .Product_MenuList.filter((a) => a.ProdectNameCN.indexOf("件套") == -1);
    },

    // 多选的数量
    handleSelectionChange(val) {
      this.checkNum = val.length;
    },
    // 换页数
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getTableList();
    },
    handleSizeChange(val) {
      this.currentPage = 1;
      this.pageSize = val;
      this.getTableList();
    },
  },
};
</script>

<style scoped>
.el-table--border::after, .el-table--group::after, .el-table::before {
    content: '';
    position: absolute;
    background-color: #cfd7e5 !important;
    z-index: 1;
}
.btn {
  background: white;
  color: #409eff;
}
.searchUL li {
  cursor: pointer;
  padding-left: 0px;
  list-style: none;
  display: inline-block;
  color: #606266;
  font-size: 14px;
  margin-right: 20px;
}
.searchUL li:hover {
  color: #2f74ff;
}
.searchUL {
  float: left;
  margin: 0px;
  flex-shrink: 0;
  line-height: 28px;
  padding-left: 20px;
}
.moveupImg {
  vertical-align: middle;
  margin-left: 5px;
  margin-right: 5px;
}
</style>