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

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

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

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

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" }];
      }
    },

vxe-table 表格里每行的项的下拉选项不同的处理方式_第1张图片vxe-table 表格里每行的项的下拉选项不同的处理方式_第2张图片

vxe-table 表格里每行的项的下拉选项不同的处理方式_第3张图片 

 

你可能感兴趣的:(vxe-table,javascript,前端)