pro-table中的fieldProps不能控制select的disabled

477 阅读1分钟

实现的业务:在可编辑表格中,前面一项的下拉决定了后边的字段是否是可编辑的。以下描述的业务是:【计价方式】为“费率”时,基准可以编辑;【计价方式】为“固定服务费”时,基准不能编辑。

问题描述

我在EditableProTable用自带的type描述下拉,但是配置fieldProps不生效
代码如下

{
  key: "costBaseline",
  title: "基准",
  dataIndex: "costBaseline",
  align: "center",
  valueType: "select",
  valueEnum: {
    1: "采购单价",
    2: "服务单价",
    3: "分摊单价",
    4: "实际总价",
  },
  fieldProps: (from, { rowKey, rowIndex }) => {
    if (from.getFieldValue([rowKey || "", "cmputExpsMode"]) === "1") {
      return {
        disabled: false,
      };
    }
    if (
      from.getFieldValue([rowKey || "", "cmputExpsMode"]) === "2" ||
      !from.getFieldValue([rowKey || "", "cmputExpsMode"])
    ) {
      return {
        disabled: true,
      };
    }
    return {};
  },

},

自己手写一个下拉能够解决这个问题

{
  key: "costBaseline",
  title: "基准",
  dataIndex: "costBaseline",
  align: "center",
  renderFormItem: (_, {}, form) => (
    <Select
      placeholder="请选择"
      disabled={
        form.getFieldValue([_.entry.id, "cmputExpsMode"]) === "2"
      }
    >
      <Select.Option value="1">采购单价</Select.Option>
      <Select.Option value="2">服务单价</Select.Option>
      <Select.Option value="3">分摊单价</Select.Option>
      <Select.Option value="4">实际总价</Select.Option>
    </Select>
  ),
},