from 组件没有处理 ifshow 为fasle 时按钮样式错位

[Jade6767]

⚠️ 重要 ⚠️ 在进一步操作之前，请检查下列选项。如果您忽视此模板或者没有提供关键信息，您的 Issue 将直接被关闭

• [x] 已阅读 [文档](https://anncwb.github.io/vue-vben-admin-doc/).
• [x] 确保您的代码已是最新或者所报告的 Bug 在最新版本中可以重现. (部分 Bug 可能已经在最近的代码中修复)
• [x] 已在 Issues 中搜索了相关的关键词
• [x] 不是 ant design vue 组件库的 Bug

描述 Bug

from 组件没有处理 ifshow 为fasle 时按钮样式错位

复现 Bug

from 组件没有处理 ifshow 为fasle 时按钮样式错位 src\components\Form\src\hooks\useAdvanced.ts 这个文件的updateAdvanced这个方法 加上ifshow处理

function updateAdvanced() {
    let itemColSum = 0
    let realItemColSum = 0
    const { baseColProps = {} } = unref(getProps)

    for (const schema of unref(getSchema)) {
      const { show, ifShow, colProps } = schema
      let isShow = true
      let isIfShow = true

      if (isBoolean(show)) {
        isShow = show
      }

      if (isFunction(show)) {
        isShow = show({
          schema: schema,
          model: formModel,
          field: schema.field,
          values: {
            ...unref(defaultValueRef),
            ...formModel
          }
        })
      }

      //isIfShow 为false 处理
      if (isBoolean(ifShow)) {
        isIfShow = ifShow
      }
      if (isFunction(ifShow)) {
        isIfShow = ifShow({
          schema: schema,
          model: formModel,
          field: schema.field,
          values: {
            ...unref(defaultValueRef),
            ...formModel
          }
        })
      }

      if (isShow && isIfShow && (colProps || baseColProps)) {
        const { itemColSum: sum, isAdvanced } = getAdvanced(
          { ...baseColProps, ...colProps },
          itemColSum
        )

        itemColSum = sum || 0
        if (isAdvanced) {
          realItemColSum = itemColSum
        }
        schema.isAdvanced = isAdvanced
      }
    }

    advanceState.actionSpan = (realItemColSum % BASIC_COL_LEN) + unref(getEmptySpan)

    getAdvanced(unref(getProps).actionColOptions || { span: BASIC_COL_LEN }, itemColSum, true)

    emit('advanced-change')
  }

系统信息

• 操作系统:
• Node 版本:
• 包管理器 (npm/yarn/pnpm) 及其版本:

[HughCodeX]

是哪个按钮样式发生错位, 能否提供一个demo方便复现问题呢

[Jade6767]

就是这个表格上面的form src\components\Form\src\hooks\useAdvanced.ts 这个文件计算sapn 的时候只处理了show为false没有处理ifshow 为false 的情况

[Jade6767]

[HughCodeX]

为什么你的FormAction会和FormItem处在同一行呢, 我把最后一个FromItem的ifshow设置为false没有出现你图片中的这种情况

[wangjue666]

@flyknife855 提供下你的浏览器页面尺寸

[Jade6767]

  formConfig: {
      labelWidth: 80,
      schemas: [
        {
          field: 'nameLike',
          label: '姓名',
          component: 'Input',
          colProps: { span: 6 },
          componentProps: {
            placeholder: '请输入姓名'
          }
        },
        {
          field: 'auditStatus',
          label: '审核状态',
          component: 'Select',
          colProps: { span: 6 },
          componentProps: {
            options: [
              { label: '待审核', value: 0 },
              { label: '审核通过', value: 1 },
              { label: '审核未通过', value: 2 }
            ]
          }
        },
        {
          field: 'type',
          label: '工作人员类型',
          component: 'ApiSelect',
          colProps: { span: 6 },
          labelWidth: 120,
          componentProps: {
            api: getListApi,
            params: {
              typeCode: 'staffType'
            },
            labelField: 'name',
            valueField: 'keyCode',
            onChange: async () => {
              await getForm().setFieldsValue({
                group: null
              })
              await reload()
            }
          }
        },
        {
          field: 'group',
          colProps: { span: 6 },
          labelWidth: 120,
          label: '组',
          component: 'ApiSelect',
          ifShow: ({ values }) => values.type === 2,
          componentProps: {
            api: findListWork,
            search: true,
            params: {
              meetingId: data.row.meetingId
            },
            labelField: 'name',
            valueField: 'id',
            resultField: 'datas',
            placeholder: '请选择所在工作组'
          }
        },
        {
          field: 'group',
          colProps: { span: 6 },
          labelWidth: 120,
          label: '团',
          component: 'ApiSelect',
          ifShow: ({ values }) => values.type === 1,
          componentProps: {
            api: getDepTreeApi,
            search: true,
            params: {
              treeType: 1
            },
            labelField: 'name',
            valueField: 'id',
            resultField: 'datas',
            placeholder: '请选择所在工作组'
          }
        }
      ]
    },
    useSearchForm: true
  })

我的配置是这样的

[HughCodeX]

就是这个表格上面的form src\components\Form\src\hooks\useAdvanced.ts 这个文件计算sapn 的时候只处理了show为false没有处理ifshow 为false 的情况

ifshow 为false的情况下, FormAction往前移动是正常的吧, 包括show为false也是这样的

[Jade6767]

就是这个表格上面的form src\components\Form\src\hooks\useAdvanced.ts 这个文件计算sapn 的时候只处理了show为false没有处理ifshow 为false 的情况

ifshow 为false的情况下, FormAction往前移动是正常的吧, 包括show为false也是这样的

它应该在最右边啊

应该这样才对啊,它计算的是span 12 因为有个没展示因该是18才对啊

[Jade6767]

这个是我拉最新代码 的ifshow 的情况

<template>
  <BasicTable @register="registerTable">
    <template #form-custom> custom-slot </template>
    <template #headerTop>
      <Alert type="info" show-icon>
        <template #message>
          <template v-if="checkedKeys.length > 0">
            <span>已选中{{ checkedKeys.length }}条记录(可跨页)</span>
            <a-button type="link" @click="checkedKeys = []" size="small">清空</a-button>
          </template>
          <template v-else>
            <span>未选中任何项目</span>
          </template>
        </template>
      </Alert>
    </template>
    <template #toolbar>
      <a-button type="primary" @click="getFormValues">获取表单数据</a-button>
    </template>
  </BasicTable>
</template>
<script lang="ts" setup>
  import { ref } from 'vue';
  import { BasicTable, useTable } from '@/components/Table';
  import { getBasicColumns } from './tableData';
  import { Alert } from 'ant-design-vue';
  import type { Key } from 'ant-design-vue/lib/table/interface';
  import { demoListApi } from '@/api/demo/table';
  const checkedKeys = ref<Key[]>([]);
  const [registerTable, { getForm }] = useTable({
    title: '开启搜索区域',
    api: demoListApi,
    columns: getBasicColumns(),
    useSearchForm: true,
    formConfig: {
      labelWidth: 80,
      schemas: [
        {
          field: 'nameLike',
          label: 'ifShow',
          component: 'Input',
          colProps: { span: 6 },
          componentProps: {
            placeholder: '请输入姓名'
          }
        },
        {
          field: 'auditStatus',
          label: '审核状态',
          component: 'Select',
          colProps: { span: 6 },
          componentProps: {
            options: [
              { label: '待审核', value: 0 },
              { label: '审核通过', value: 1 },
              { label: '审核未通过', value: 2 }
            ]
          }
        },
        {
          field: 'type',
          label: '工作人员类型',
          component: 'Select',
          colProps: { span: 6 },
          labelWidth: 120,
          componentProps: {
          options:[
            { label: '普通员工', value: 1 },
            { label: '代表团员工', value: 2 }
          ]
          }
        },
        {
          field: 'group',
          colProps: { span: 6 },
          labelWidth: 120,
          label: '所在工作组',
          component: 'Select',
          ifShow: ({ values }) => values.type === 2,
          componentProps: {
            search: true,

            labelField: 'name',
            valueField: 'id',
            resultField: 'datas',
            placeholder: '请选择所在工作组'
          }
        },
        {
          field: 'group1',
          colProps: { span: 6 },
          labelWidth: 120,
          label: '所在代表团',
          component: 'ApiSelect',
          ifShow: ({ values }) => values.type === 1,
          componentProps: {
            params: {
              treeType: 1
            },
            labelField: 'name',
            valueField: 'id',
            resultField: 'datas',
            placeholder: '请选择所在工作组'
          }
        }
      ]
    },
    showTableSetting: true,
    tableSetting: { fullScreen: true },
    showIndexColumn: false,
    rowKey: 'id',
    rowSelection: {
      type: 'checkbox',
      selectedRowKeys: checkedKeys.value,
      onSelect: onSelect,
      onSelectAll: onSelectAll,
    },
  });

  function getFormValues() {
    console.log(getForm().getFieldsValue());
  }

  function onSelect(record, selected) {
    if (selected) {
      checkedKeys.value = [...checkedKeys.value, record.id];
    } else {
      checkedKeys.value = checkedKeys.value.filter((id) => id !== record.id);
    }
  }
  function onSelectAll(selected, selectedRows, changeRows) {
    const changeIds = changeRows.map((item) => item.id);
    if (selected) {
      checkedKeys.value = [...checkedKeys.value, ...changeIds];
    } else {
      checkedKeys.value = checkedKeys.value.filter((id) => {
        return !changeIds.includes(id);
      });
    }
  }
</script>

这是show 的情况

<template>
  <BasicTable @register="registerTable">
    <template #form-custom> custom-slot </template>
    <template #headerTop>
      <Alert type="info" show-icon>
        <template #message>
          <template v-if="checkedKeys.length > 0">
            <span>已选中{{ checkedKeys.length }}条记录(可跨页)</span>
            <a-button type="link" @click="checkedKeys = []" size="small">清空</a-button>
          </template>
          <template v-else>
            <span>未选中任何项目</span>
          </template>
        </template>
      </Alert>
    </template>
    <template #toolbar>
      <a-button type="primary" @click="getFormValues">获取表单数据</a-button>
    </template>
  </BasicTable>
</template>
<script lang="ts" setup>
  import { ref } from 'vue';
  import { BasicTable, useTable } from '@/components/Table';
  import { getBasicColumns } from './tableData';
  import { Alert } from 'ant-design-vue';
  import type { Key } from 'ant-design-vue/lib/table/interface';
  import { demoListApi } from '@/api/demo/table';
  const checkedKeys = ref<Key[]>([]);
  const [registerTable, { getForm }] = useTable({
    title: '开启搜索区域',
    api: demoListApi,
    columns: getBasicColumns(),
    useSearchForm: true,
    formConfig: {
      labelWidth: 80,
      schemas: [
        {
          field: 'nameLike',
          label: 'Show',
          component: 'Input',
          colProps: { span: 6 },
          componentProps: {
            placeholder: '请输入姓名'
          }
        },
        {
          field: 'auditStatus',
          label: '审核状态',
          component: 'Select',
          colProps: { span: 6 },
          componentProps: {
            options: [
              { label: '待审核', value: 0 },
              { label: '审核通过', value: 1 },
              { label: '审核未通过', value: 2 }
            ]
          }
        },
        {
          field: 'type',
          label: '工作人员类型',
          component: 'Select',
          colProps: { span: 6 },
          labelWidth: 120,
          componentProps: {
          options:[
            { label: '普通员工', value: 1 },
            { label: '代表团员工', value: 2 }
          ]
          }
        },
        {
          field: 'group',
          colProps: { span: 6 },
          labelWidth: 120,
          label: '所在工作组',
          component: 'Select',
          show: ({ values }) => values.type === 2,
          componentProps: {
            search: true,

            labelField: 'name',
            valueField: 'id',
            resultField: 'datas',
            placeholder: '请选择所在工作组'
          }
        },
        {
          field: 'group1',
          colProps: { span: 6 },
          labelWidth: 120,
          label: '所在代表团',
          component: 'ApiSelect',
          show: ({ values }) => values.type === 1,
          componentProps: {
            params: {
              treeType: 1
            },
            labelField: 'name',
            valueField: 'id',
            resultField: 'datas',
            placeholder: '请选择所在工作组'
          }
        }
      ]
    },
    showTableSetting: true,
    tableSetting: { fullScreen: true },
    showIndexColumn: false,
    rowKey: 'id',
    rowSelection: {
      type: 'checkbox',
      selectedRowKeys: checkedKeys.value,
      onSelect: onSelect,
      onSelectAll: onSelectAll,
    },
  });

  function getFormValues() {
    console.log(getForm().getFieldsValue());
  }

  function onSelect(record, selected) {
    if (selected) {
      checkedKeys.value = [...checkedKeys.value, record.id];
    } else {
      checkedKeys.value = checkedKeys.value.filter((id) => id !== record.id);
    }
  }
  function onSelectAll(selected, selectedRows, changeRows) {
    const changeIds = changeRows.map((item) => item.id);
    if (selected) {
      checkedKeys.value = [...checkedKeys.value, ...changeIds];
    } else {
      checkedKeys.value = checkedKeys.value.filter((id) => {
        return !changeIds.includes(id);
      });
    }
  }
</script>

[Jade6767]

刚刚发现 ifshow,show 动态布局 只有搜素后FormAction 布局才会变化,不然不会变化

[anncwb]

This issue is stale because it has been open 60 days with no activity. Remove stale label or comment or this will be closed in 7 days