tusen-ai / naive-ui

A Vue 3 Component Library. Fairly Complete. Theme Customizable. Uses TypeScript. Fast.
https://www.naiveui.com
MIT License
16.08k stars 1.67k forks source link

Several expand triggers in the tree data table (using with grouped header) #6403

Open massimoteplovsky opened 3 weeks ago

massimoteplovsky commented 3 weeks ago

Describe the bug

When tree data table is used a "children-key" prop is required (default value is "children"). That's ok, but grouped header requires "children" prop in schema too. With these settings table is rendered with several expand triggers in each row (one in first column and others where columns has "children" prop)

It seems to me that this issue appeared after update naive to version 2.40.1, last stable - 2.39.0.

image

Steps to reproduce

Basic options (columns and table data) for tree data table, below:

const columns = [ { title: 'Column 1', key: 'column1', align: 'center', }, { title: 'Column 2', align: 'center', children: [ { title: 'Column 2.1', key: 'column2', align: 'center', }, { title: 'Column 2.2', key: 'column2', align: 'center', }, ], }, { title: 'Column 3', align: 'center', children: [ { title: 'Column 3.1', key: 'column3', align: 'center', }, { title: 'Column 3.2', key: 'column3', align: 'center', }, ], }, { title: 'Column 4', key: 'column4', align: 'center', }, ];

const data = [ { key: 1, column1: 1, column2: 2, column3: 3, column4: 4, children: [ { key: 2, column1: 1, column2: 2, column3: 3, column4: 4, children: [{ key: 3, column1: 1, column2: 2, column3: 3, column4: 4 }], }, ], }, ];

Link to minimal reproduction

no link

System Info

System:
    OS: macOS 13.4.1
    CPU: (8) x64 Apple M1 Pro
    Memory: 62.48 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 10.21.0 - ~/.nvm/versions/node/v10.21.0/bin/node
    Yarn: 1.22.19 - ~/.nvm/versions/node/v10.21.0/bin/yarn
    npm: 6.14.4 - ~/.nvm/versions/node/v10.21.0/bin/npm
  Browsers:
    Chrome: 129.0.6668.70
    Edge: 129.0.2792.52
    Safari: 16.5.1
  npmPackages:
    naive-ui: 2.40.1
    vue: 3.4.31

Used Package Manager

npm

Validations

ValentinDankovtsev commented 1 week ago

I have the same problem

image

minimal representation https://codesandbox.io/p/sandbox/dry-silence-9czywv?file=%2Fsrc%2FDemo.vue&workspaceId=3817d861-1ab3-485b-93b2-6358754ecc46