Skip to content

useVbenTable 可编辑表格,使用ElCascader时,如果配置了editRules表格校验,ElCascader的面板选项就会点不动 #5541

Closed as not planned
@763124572

Description

@763124572

列配置:

{
      title: '品类范围',
      field: props.editable ? 'sortRange' : 'sortRangeName',
      width: 160,
      editRender: { enabled: props.editable },
      slots: props.editable
        ? {
            edit: ({ row, rowIndex }) => {
              return (
                <FormField
                  commonComponentProps={{}}
                  component="Cascader"
                  componentProps={{
                    ref: 'sortRangeRef',
                    placeholder: '请选择',
                    options: sortList.value,
                    filterable: true,
                    showAllLevels: false,
                    popperClass: 'vxe-table--ignore-clear',
                    props: {
                      value: 'categoryId',
                      label: 'categoryName',
                      children: 'children',
                      checkStrictly: true,
                    },
                    onChange(value: any) {
                      const findCategoryName = (
                        id: string,
                        list: any[],
                      ): string => {
                        for (const item of list) {
                          if (item.categoryId === id) {
                            return item.categoryName;
                          }
                          if (item.children) {
                            const found = findCategoryName(id, item.children);
                            if (found) return found;
                          }
                        }
                        return '';
                      };
                      // 获取数组的最后一个值作为实际选中值
                      const selectedId = Array.isArray(value)
                        ? value[value.length - 1]
                        : value;
                      row.sortRangeName = findCategoryName(
                        selectedId,
                        sortList.value,
                      );
                    },
                  }}
                  fieldName={`${props.prefixName}[${rowIndex}].sortRange`}
                  hideLabel={true}
                  inline={true}
                />
              );
            },
            default: ({ row }) => {
              return row.sortRangeName;
            },
          }
        : undefined,
    },

表格配置:

editRules: {
    xxxx: [{ required: true, message: '必须填写' }]
}

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions