Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Vxe使用插槽的时候,格式化formatter不生效 #2687

Open
1 task done
aonoa opened this issue Dec 12, 2024 · 0 comments
Open
1 task done

Vxe使用插槽的时候,格式化formatter不生效 #2687

aonoa opened this issue Dec 12, 2024 · 0 comments
Labels
bug Something isn't working

Comments

@aonoa
Copy link

aonoa commented Dec 12, 2024

可复现的链接(必须为公开链接,仅包含能复现问题的示例代码):

https://stackblitz.com/edit/vitejs-vite-4qxkf8sd?file=src%2Fviews%2FDemo1.vue

问题描述与截图:

再同时使用slotsformatter的时候,formatter不会生效
代码

<script lang="ts" setup>
import { reactive } from 'vue';
import type { VxeGridProps } from 'vxe-table';
import { VxeUI } from 'vxe-pc-ui';

interface RowVO {
  id: number;
  name: string;
  role: string;
  flag1: boolean;
  flag2: number;
}

VxeUI.formats.add('formatGroupLock1', {
  cellFormatMethod({ cellValue }) {
    return cellValue !== 1;
  },
});

const gridOptions = reactive<VxeGridProps<RowVO>>({
  border: true,
  showOverflow: true,
  columns: [
    { type: 'seq', width: 70 },
    { field: 'name', title: 'Name', minWidth: 200 },
    {
      field: 'flag1',
      title: '开关',
      width: 120,
      slots: { default: 'flag1_default' },
    },
    {
      field: 'flag2',
      title: '可编辑',
      width: 120,
      slots: { default: 'flag2_default' },
      formatter: 'formatGroupLock1',
    },
  ],
  data: [
    { id: 10001, name: 'Test1', role: 'Develop', flag1: false, flag2: 2 },
    { id: 10002, name: 'Test2', role: 'Test', flag1: true, flag2: 2 },
    { id: 10003, name: 'Test3', role: 'PM', flag1: false, flag2: 1 },
  ],
});
</script>

<template>
  <div>
    <vxe-grid v-bind="gridOptions">
      <template #flag1_default="{ row }">
        <vxe-switch v-model="row.flag1" disabled></vxe-switch>
      </template>

      <template #flag2_default="{ row }">
        <vxe-switch v-model="row.flag2"></vxe-switch>
      </template>
    </vxe-grid>
  </div>
</template>

实际效果:
image

在这个例子中,flag2数据为数字,但是通过formatter将数字转成了boolean类型,应用vxe-switch后,结果未如预期被正确渲染

期望效果为:
image

期望的结果:

No response

操作系统:

ubnutu22.04

浏览器版本:

Chrome 130.0.6723.69

vue 版本:

3.5.13

vxe-pc-ui 版本:

4.3.27

vxe-table 版本:

4.9.16

是否使用当前最新版本?

  • 我已确认是使用当前的最新版本并已按要求提供复现链接与示例代码。
@aonoa aonoa added the bug Something isn't working label Dec 12, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

1 participant