vxe-table 表格里每行的项的下拉选项不同的处理方式

最新推荐文章于 2024-11-04 10:32:35 发布

Y、seventeen

最新推荐文章于 2024-11-04 10:32:35 发布

阅读量4.9k

点赞数 2

分类专栏： vxe-table 文章标签： javascript 前端

本文链接：https://blog.csdn.net/weixin_43303420/article/details/122825313

版权

vxe-table 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

本文介绍了如何在直送商品和非直送商品差异处理中实现不同的下拉选项。通过在编辑激活时动态赋值，并在相关数据变化时重新计算选项，确保了页面显示和编辑的一致性。同时，利用disabled属性控制选项的可用性，提高了回显的准确性。在初始化时为下拉框赋予全量初始值，避免了回显错误。

摘要由CSDN通过智能技术生成

需求：直送商品、非直送商品，差异原因和差异处理方式的下拉选项要求不一样。

简单记录一下实现方式，可以作为参考：

1. 在激活编辑时对下拉选项赋值（根据条件去请求接口获取下拉选项或者前端设置下拉选项）；@edit-actived="editActivedEve"

editActivedEve 为获取下拉值的处理方法

<vxe-grid
          ref="xGrid"
          border="default"
          height="400"
          @edit-actived="editActivedEve"
         >

2. 相关联数据发生变化时重新计算下拉选项的值；

events: { blur: this.quantityBlurEve }

editActivedEve 为获取下拉值的处理方法

tableColumn: [
        {
          field: "settlementQuantity",
          title: "结算数量",
          editRender: {
            name: '$input',
            placeholder: '请输入数量',
            immediate: true,
            props: {
              type: 'float', digits: 2, min: 0, controls: false
            },
            events: { blur: this.quantityBlurEve }
          },
        },
]

注意：如果编辑和显示使用同一个页面的情况下，要注意下拉是否能够正常回显。提供一个思路：在初始化页面的时候为下拉选项赋全量的初始值。

可以巧妙的使用 disabled：true 进行控制是否可选，这样容错率最高，回显不容易出错。

hangdleDoMethodOption(row) {
      const doMethodColumn = this.tableColumn.find(item => item.field === "doMethod");
      const diffReasonColumn = this.tableColumn.find(item => item.field === "diffReason");
      diffReasonColumn.editRender.options = [
        { label: "商品质量问题", value: "1" },
        { label: "运输原因", value: "2" },
        { label: "客户下错订单", value: "3" },
        { label: "客情维护", value: "4" },
        { label: "客户不想要了", value: "5" },
      ]

      if (row.deliveryDirect) {
        // deliveryDirect 1 直送 商品不需要填差异和处理方式
        doMethodColumn.editRender.options = [{ label: "就地报损", value: "1", disabled: true },
          { label: "实物退仓", value: "2", disabled: true },
          { label: "无实物退仓", value: "3", disabled: true }];
        diffReasonColumn.editRender.options = [
          { label: "商品质量问题", value: "1", disabled: true },
          { label: "运输原因", value: "2", disabled: true },
          { label: "客户下错订单", value: "3", disabled: true },
          { label: "客情维护", value: "4", disabled: true },
          { label: "客户不想要了", value: "5", disabled: true },
        ];
      } else if (row.diffQuantity <= this.orderDetail.receiptValueLimit){
        doMethodColumn.editRender.options = [{ label: "就地报损", value: "1" },
          { label: "实物退仓", value: "2", disabled: true },
          { label: "无实物退仓", value: "3", disabled: true }];
      } else {
        doMethodColumn.editRender.options = [{ label: "就地报损", value: "1", disabled: true }, { label: "实物退仓", value: "2" },
          { label: "无实物退仓", value: "3" }];
      }
    },