关于#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.
解决layui前端框架 form表单,table表等内置控件不显示的问题
2020-12-10 08:25

使用form表单前需要声明, table表格也是类似原理 ...以上这篇解决layui前端框架 form表单,table表等内置控件不显示的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持软件开发网。
关于前端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
有没有人遇到过，vue前端 html2cancas截图不全的问题？ elementui vue.js 前端
2022-05-10 14:29

回答 2 已采纳这个就是截显示在当前页面的部分的内容吧，滚动滚动条再出现的就截不到了，只是给当前网页页面截图
前后端分离项目，如何解决跨域问题？
2022-02-24 09:08

沉默王二的博客跨域问题是前后端分离项目中非常常见的一个问题，举例来说，编程猫（codingmore）学习网站的前端服务跑在 8080 端口下，后端服务跑在 9002 端口下，那么前端在请求后端接口的时候就会出现跨域问题。 403 Forbidden ...
前端常见浏览器兼容性问题解决方案
2022-03-09 14:21

发呀发呀哈哈的博客所以浏览器兼容性问题一般指：css兼容、js兼容浏览器内核（渲染引擎） Chrome谷歌之前Webkit，已改Blink内核 FireFox火狐 Gecko Safari苹果 Webkit IE Trident Opera欧朋现已改用Google Chrome的Blink内核一、...
没有解决我的问题, 去提问

问题事件

关注

码龄粉丝数原力等级 --

被采纳

被点赞

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

码龄粉丝数原力等级 --

被采纳

被点赞

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

码龄粉丝数原力等级 --

被采纳

被点赞

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

悬赏问题

¥15 对于这个复杂问题的解释说明
¥50 三种调度算法报错采用的你的方案
¥15 关于#python#的问题，请各位专家解答！
¥200 询问：python实现大地主题正反算的程序设计，有偿
¥15 smptlib使用465端口发送邮件失败
¥200 总是报错，能帮助用python实现程序实现高斯正反算吗？有偿
¥15 对于squad数据集的基于bert模型的微调
¥15 为什么我运行这个网络会出现以下报错？CRNN神经网络
¥20 steam下载游戏占用内存
¥15 CST保存项目时失败

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

4条回答 默认 最新

问题事件

悬赏问题

4条回答默认最新