关于#Table#的问题，如何解决？

我想去掉右侧的滚动条，高度设置无效，怎么解决呢


<template>
  
  <el-dialog
    title="选择需要新增的入库单明细"
    :visible.sync="visible"
    width="1700px"
    append-to-body
    :close-on-click-modal="false"
  >
    <el-form :inline="true" :model="queryParams">
      <el-form-item label="名称">
        <el-input
          size="small"
          v-model="queryParams.material.name"
          @keyup.enter.native="queryToolInventory"
        />
      </el-form-item>
      <el-form-item label="出厂编号">
        <el-input
          size="small"
          v-model="queryParams.toolCode"
          @keyup.enter.native="queryToolInventory"
        />
      </el-form-item>
      <el-form-item label="规格型号">
        <el-input
          size="small"
          v-model="queryParams.material.invspec"
          @keyup.enter.native="queryToolInventory"
        />
      </el-form-item>
      <el-form-item label="层架位码">
        <el-input
          size="small"
          v-model="queryParams.params.positionCode"
          @keyup.enter.native="queryToolInventory"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" size="mini" @click="queryToolInventory">
          查询
        </el-button>
        <el-button size="mini" @click="resetQueryToolInventory">重置</el-button>
      </el-form-item>
    </el-form>
    <el-row :gutter="20">
      <el-col :span="11">
        <el-table
          ref="toolInventoryList"
          v-loading="leftLoading"
          :data="toolInventoryList"
          :row-key="getRowKey"
          :row-style="rowStyle"
          fit
          highlight-current-row
          @selection-change="leftSelectionChange"
          border
        >
          <el-table-column
            type="selection"
            width="55"
            align="center"
            :reserve-selection="true"
          />
          <el-table-column
            label="货位id"
            align="center"
            prop="locationId"
            v-if="false"
          />
          <el-table-column
            label="物料编码"
            align="center"
            prop="material.code"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            label="物料名称"
            align="center"
            prop="material.name"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            label="货位编码"
            align="center"
            prop="cargoLocation.code"
            :show-overflow-tooltip="true"
          />
          <el-table-column label="可用数量" align="center" prop="quantity">
            <template slot-scope="scope">
              {{ scope.row.quantity - scope.row.frozenQuantity }}
            </template>
          </el-table-column>
        </el-table>
        <pagination
          v-show="leftTotal > 0"
          :total="leftTotal"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getToolInventoryList"
          :page-sizes="[5]"
        />
      </el-col>
      <el-col :span="2" style="text-align: center">
        <el-button
          @click="addStaff"
          type="primary"
          :disabled="!addData.length"
          icon="el-icon-arrow-right"
          circle
        />
        <el-button
          @click="removeStaff"
          type="primary"
          :disabled="!removeData.length"
          icon="el-icon-arrow-left"
          circle
          style="margin-left: 0; margin-top: 10px"
        />
      </el-col>
      <el-col :span="11">
        <el-table
          ref="selectedToolInventoryList"
          v-loading="rightLoading"
          :data="rightPageList"
          :row-key="getRowKey"
          border
          fit
          highlight-current-row
          @selection-change="rightSelectionChange"
        >
          <el-table-column
            type="selection"
            width="55"
            align="center"
            :reserve-selection="true"
          />
          <el-table-column
            label="货位id"
            align="center"
            prop="locationId"
            v-if="false"
          />
          <el-table-column
            label="物料编码"
            align="center"
            prop="materialCode"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            label="物料名称"
            align="center"
            prop="materialName"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            label="货位编码"
            align="center"
            prop="locationCode"
            :show-overflow-tooltip="true"
          />
          <el-table-column label="借用数量" prop="quantity" align="center">
            <template slot-scope="{ row }">
              <el-input-number
                style="width: 100%"
                :max="row.usableQuantity"
                :min="1"
                v-model="row.lendNumber"
                placeholder="点击修改数量"
              />
            </template>
          </el-table-column>
        </el-table>
        <pagination
          v-show="rightTotal > 0"
          :total="rightTotal"
          :page.sync="rightPageNum"
          :limit.sync="rightPageSize"
          @pagination="handleRightPage"
          :page-sizes="[5]"
        />
      </el-col>
    </el-row>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="batchSubmit">确 定</el-button>
      <el-button @click="visible = false">取 消</el-button>


  </el-dialog>
</template>

<script>
import store from "@/store";

export default {
  name: "TableTransfer",
  data() {
    return {
      /** 当前登录人 */
      user: store.state.user,
      /** 站点id */
      deptId:
        store.state.user.station === store.state.user.company.deptId ||
        store.state.user.station,
      // 弹窗是否可见
      visible: false,
      // 表格加载状态
      leftLoading: true,
      /** 查询参数 */
      queryParams: {
        pageNum: 1,
        pageSize: 5,
        sorter: "",
        material: {
          name: undefined,
          invspec: undefined,
        },
        toolCode: undefined,
        params: { positionCode: undefined },
        deptId: store.state.user.station,
      },
      /** 左侧原始库存数据 */
      toolInventoryList: [],
      /** 可用的库存数据 */
      usableToolInventoryList: [],
      /** 左侧选中的数据 */
      addData: [],
      /** 左侧数据总条数 */
      leftTotal: undefined,
      rightLoading: false,
      /** 提交的数据 */
      submitDataList: [],
      /** 右侧分页数据 */
      rightPageList: [],
      /** 右侧选中的数据 */
      removeData: [],
      rightTotal: undefined,
      rightPageNum: 1,
      rightPageSize: 5,
      staffOptions: [
        { key: 28, display_name: "补货员" },
        { key: 29, display_name: "测试员" },
      ],
    };
  },
  props: {
    lendOrder: {},
  },
  watch: {
    visible: {
      deep: true,
      immediate: true,
      handler: function (newValue, oldValue) {
        if (newValue) {
          this.resetQueryParams();
          this.getList();
        }
      },
    },
  },
  methods: {
    rowStyle({ row, rowIndex }) {
      let stylejson = {};
      stylejson.height = "57px";
      return stylejson;
    },
    // 从后台获取左边表格的数据
    getList() {
      this.rightLoading = true;
      this.leftLoading = true;
      // 查询左侧库存明细
      this.$api.listToolInventory(this.queryParams).then((res2) => {
        this.leftTotal = res2.total;
        this.toolInventoryList = res2.rows;
        this.leftLoading = false;
        // 查询右侧的借用单明细
        this.$api
          .listLendDetails({ lendId: this.lendOrder.id })
          .then((res1) => {
            this.rightTotal = res1.total;
            this.submitDataList = res1.rows;
            // 处理右侧借用数量为计数器最大值,从左侧再添加一次可以变更其可用数量为右侧借用数量最大值
            for (let i = 0; i < this.submitDataList.length; i++) {
              this.submitDataList[i].usableQuantity = parseFloat(
                this.submitDataList[i].lendNumber
              );
            }
            this.handleRightPage();
            this.$forceUpdate();
            this.rightLoading = false;
          });
      });
    },
    /** 查询可借用的工具库存 */
    getToolInventoryList() {
      this.leftLoading = true;
      this.$api.listToolInventory(this.queryParams).then((res2) => {
        this.leftTotal = res2.total;
        this.toolInventoryList = res2.rows;
        this.leftLoading = false;
      });
    },
    // 将左边表格选择项存入addData中
    leftSelectionChange(rows) {
      this.addData = [];
      if (rows) {
        rows.forEach((row) => {
          if (row) {
            this.addData.push(row);
          }
        });
      }
    },
    // 左边表格选择项移到右边
    addStaff() {
      setTimeout(() => {
        this.$refs["toolInventoryList"].clearSelection();
        this.$refs["selectedToolInventoryList"].clearSelection();
      }, 0);
      let submitLocationIds = this.submitDataList.map((val) => {
        return val.locationId;
      });
      for (let i = 0; i < this.addData.length; i++) {
        let item = this.addData[i];
        // submitDataList中不存在的货位push，存在的不做处理
        let index = submitLocationIds.indexOf(item.locationId);
        if (index > -1) {
          this.submitDataList.splice(index, 1);
        }
        this.submitDataList.push({
          locationId: item.locationId,
          materialId: item.material.id,
          materialCode: item.material.code,
          materialName: item.material.name,
          locationCode: item.cargoLocation.code,
          lendNumber: item.quantity - item.frozenQuantity,
          usableQuantity:
            parseFloat(item.quantity) - parseFloat(item.frozenQuantity),
        });
      }
      // this.$forceUpdate();
      this.addData = [];
      this.handleRightPage();
    },
    // 将右边表格选择项存入selectedStaffData中
    rightSelectionChange(rows) {
      this.removeData = [];
      if (rows) {
        rows.forEach((row) => {
          if (row) {
            this.removeData.push(row);
          }
        });
      }
    },
    // 右边表格选择项移到左边
    removeStaff() {
      setTimeout(() => {
        this.$refs["toolInventoryList"].clearSelection();
        this.$refs["selectedToolInventoryList"].clearSelection();
      }, 0);
      for (let i = 0; i < this.removeData.length; i++) {
        let itemi = this.removeData[i];
        for (let j = 0; j < this.submitDataList.length; j++) {
          let itemj = this.submitDataList[j];
          if (itemi.locationId === itemj.locationId) {
            this.submitDataList.splice(j, 1);
          }
        }
      }
      this.removeData = [];
      this.handleRightPage();
    },
    getRowKey(row) {
      return row.locationId;
    },
    /** 提交 */
    batchSubmit() {
      if (this.submitDataList && this.submitDataList.length > 0) {
        let dataArr = [];
        this.submitDataList.forEach((item) => {
          dataArr.push(
            Object.assign(item, {
              lendId: this.lendOrder.id,
              deptId: this.deptId,
            })
          );
        });
        this.$api.batchAddLendDetails(dataArr).then((res) => {
          this.$modal.msgSuccess("保存成功");
          this.visible = false;
          this.$emit("refreshData", this.lendOrder.lendCode);
        });
      } else {
        this.$modal.msgError("右侧数据不能为空");
        return;
      }
    },
    /** 处理右侧数据分页 */
    handleRightPage() {
      this.rightLoading = true;
      this.rightTotal = this.submitDataList.length;
      this.rightPageList = [];
      for (let i = 0; i < this.submitDataList.length; i++) {
        if (
          i >= 0 + this.rightPageSize * (this.rightPageNum - 1) &&
          i < 5 + this.rightPageSize * (this.rightPageNum - 1)
        ) {
          this.rightPageList.push(this.submitDataList[i]);
        }
      }
      this.rightLoading = false;
    },
    /** 查询按钮 */
    queryToolInventory() {
      this.queryParams.pageNum = 1;
      this.getToolInventoryList();
    },
    /** 重置按钮 */
    resetQueryToolInventory() {
      this.resetQueryParams();
      this.queryToolInventory();
    },
    /** 重置查询参数 */
    resetQueryParams() {
      this.queryParams = {
        pageNum: 1,
        pageSize: 5,
        sorter: "",
        material: {
          name: undefined,
          invspec: undefined,
        },
        toolCase: { toolCode: undefined },
        params: { position: undefined },
        deptId: this.user.station,
      };
    },
  },
};
</script>

写回答
好问题 0 提建议
追加酬金
关注问题
分享
邀请回答
编辑收藏删除
收藏举报

4条回答默认最新

关注

码龄粉丝数原力等级 --

被采纳

被点赞

采纳率
管那么多 2022-11-08 16:14
关注
给 <el-dialog class="XXXX" 加class

.XXXX{ height:100%; overflow: hidden; } .XXXX .el-dialog__body{ height:100%; overflow: hidden; }
本回答被题主选为最佳回答 , 对您是否有帮助呢?

解决无用
评论打赏
分享
举报编辑记录

评论

按下Enter换行，Ctrl+Enter发表内容

查看更多回答(3条)

报告相同问题？

关注问题

关于#Table#的问题，如何解决？前端
2022-11-08 15:21

回答 4 已采纳给 <el-dialog class="XXXX" 加class .XXXX{ height:100%; overflow: hidden; } .XXXX .el-dialog__
关于#php#的问题，如何解决？ php 前端
2022-12-25 12:30

回答 5 已采纳题主没搞清楚前端后端并且后端逻辑有问题，删除和添加代码都会执行，先添加了，然后后面又删除了，所以最终状态该就是删除的。应该是isset，而不是!isset，判断是需要的操作才执行数据库，改下面这样，点
关于#bootstrap#的问题，如何解决？ html java 前端
2022-07-22 09:32

回答 3 已采纳小于号 < 大于号 >
前端el-table 错乱问题解决
2022-08-03 13:52

吃饭睡觉摸鱼上网的博客前端el-table的样式错位问题
关于#jsp#的问题，如何解决？前端有问必答
2021-10-23 14:44

回答 2 已采纳 order.jsp中数量的输入框名称是num，不是num1，所以 if(num1=="num1"){ 对比不成功走了else分支，num1为null，在parseInt就报错了。应该用下的获取同名输入
关于#layui#下拉框数据回显的问题，如何解决？ jquery layui 前端
2022-10-05 14:34

回答 1 已采纳应该是异步问题吧，表单赋值在下拉框请求时就执行了但下拉框数据还没加上导致不回显表单赋值在异步里试试
如何解决el-table单元格的显示问题？ javascript vue.js 前端框架
2022-10-26 22:29

回答 3 已采纳 .. 写的也太复杂了接口返回里面 classInfo[i] 这个i是哪来的？你不会循环了接口吧看你页面上的逻辑感觉调个接口然后 this.tableData = res.data.
前后端分离项目，如何解决跨域问题？
2022-02-24 09:08

沉默王二的博客跨域问题是前后端分离项目中非常常见的一个问题，举例来说，编程猫（codingmore）学习网站的前端服务跑在 8080 端口下，后端服务跑在 9002 端口下，那么前端在请求后端接口的时候就会出现跨域问题。 403 Forbidden ...
关于前端vue项目方法代码重复问题，如何解决？ javascript vue.js 前端
2023-02-27 16:57

回答 2 已采纳 1，新建一个.js文件，比如download.js，把你写的代码放进去 export function download(form) { var reportForm=form this.$api
Layui中table的limit属性没有效果，如何解决？ javascript layui 前端
2022-07-14 14:23

回答 3 已采纳表翻页会给 url: 'http://localhost:8080/staffs/show' 添加page=xx&limit=yy的参数，后台要处理这个。
页面放大element-UI的table显示不全，如何解决？？ elementui vue.js 前端
2023-02-14 12:25

回答 3 已采纳解决了各位，给el-table标签添加属性height="calc(100vh - 330px)"。后面的像素根据实际情况去调就行了。
前端如何使用proxyTable和nginx解决跨域问题
2021-11-09 13:57

guhy fighting的博客标题1.跨域原因 ...本篇主要介绍如何使用nginx和proxyTable代理的方式解决前端跨域问题标题3.proxyTable 案例：假设我们现在本地的开发地址是http://localhost:8080，请求的地址是:http://localh
是用 XLSX.utils.table_to_sheet的时候会报错不是一个函数，如何解决？ javascript web安全前端
2023-04-10 13:17

回答 1 已采纳该回答通过自己思路及引用到GPTᴼᴾᴱᴺᴬᴵ搜索,得到内容具体如下：这个错误可能是因为XLSX对象没有正确加载导致的。请确保您已经正确引入XLSX库并且可以在您的代码中访问它。如果您已经正确引入
bootstrap-table,前端分页框架
2015-11-19 17:57

综上所述，Bootstrap Table是一个功能强大的前端表格解决方案，尤其适用于需要展示大量数据并进行分页、排序和导出的场景。其丰富的API和扩展性使得开发者能够轻松构建功能丰富的数据展示界面。
前端开源库-tty-table
2019-08-30 03:26

总结来说，`tty-table` 是一个强大且易用的前端开源库，为命令行界面提供了优雅的表格解决方案。它的灵活性和易扩展性使其成为开发者处理命令行数据输出的得力助手。在开发 CLI 应用时，利用 `tty-table` 可以极大地...
没有解决我的问题, 去提问

问题事件

关注

码龄粉丝数原力等级 --

被采纳

被点赞

采纳率
已结题（查看结题原因） 11月8日
关注

码龄粉丝数原力等级 --

被采纳

被点赞

采纳率
已采纳回答 11月8日
关注

码龄粉丝数原力等级 --

被采纳

被点赞

采纳率
创建了问题 11月8日

悬赏问题

¥15 模电中二极管，三极管和电容的应用
¥15 关于模型导入UNITY的.FBX: Check external application preferences.警告。
¥15 气象网格数据与卫星轨道数据如何匹配
¥100 java ee ssm项目悬赏，感兴趣直接联系我
¥15 微软账户问题不小心注销了好像
¥15 x264库中预测模式字IPM、运动向量差MVD、量化后的DCT系数的位置
¥15 curl 命令调用正常，程序调用报 java.net.ConnectException: connection refused
¥20 关于web前端如何播放二次加密m3u8视频的问题
¥15 使用百度地图api 位置函数报错？
¥15 metamask如何添加TRON自定义网络

关于#Table#的问题，如何解决？

4条回答 默认 最新

问题事件

悬赏问题

4条回答默认最新