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

🐛 [Bug]: grid 增删数据后,行拖拽不能正常调整顺序 #1640

Open
ChrisGou opened this issue May 22, 2024 · 2 comments
Open

🐛 [Bug]: grid 增删数据后,行拖拽不能正常调整顺序 #1640

ChrisGou opened this issue May 22, 2024 · 2 comments
Labels
bug Something isn't working

Comments

@ChrisGou
Copy link

Version

latest

Vue Version

latest

Link to minimal reproduction

直接在官方的演练场替换如下代码

地址:https://opentiny.design/vue-playground?cmpId=grid-toolbar&fileName=toolbar/insert-remove-rows.vue&apiMode=Options&mode=pc&theme=default

<template>
  <div>
    <tiny-grid ref="insertGrid" :data="tableData" :drop-config="dropConfig">
      <tiny-grid-column type="index" width="60"></tiny-grid-column>
      <tiny-grid-column field="employees" title="员工数1"></tiny-grid-column>
      <tiny-grid-column field="createdDate" title="创建日期"></tiny-grid-column>
      <tiny-grid-column field="city" title="城市"></tiny-grid-column>
      <tiny-grid-column title="操作" width="100">
        <template #default="data">
          <div style="text-align: left; font-size: 16px">
            <icon-plus class="tiny-svg-size" @click="$refs.insertGrid.insertAt(record, data.row)"></icon-plus
            >&nbsp;&nbsp;
            <icon-del class="tiny-svg-size" @click="$refs.insertGrid.remove(data.row)"></icon-del>
          </div>
        </template>
      </tiny-grid-column>
    </tiny-grid>
  </div>
</template>

<script lang="jsx">
import { Grid, GridColumn } from '@opentiny/vue'
import { IconPlus, IconDel } from '@opentiny/vue-icon'
import Sortable from 'sortablejs'
  
export default {
  components: {
    TinyGrid: Grid,
    TinyGridColumn: GridColumn,
    IconPlus: IconPlus(),
    IconDel: IconDel()
  },
  data() {
    const tableData = [
      {
        id: '1',
        name: 'GFD科技YX公司',
        city: '福州',
        employees: 800,
        createdDate: '2014-04-30 00:56:00'
      },
      {
        id: '2',
        name: 'WWW科技YX公司',
        city: '深圳',
        employees: 300,
        createdDate: '2016-07-08 12:36:22'
      },
      {
        id: '3',
        name: 'RFV有限责任公司',
        city: '中山',
        employees: 1300,
        createdDate: '2014-02-14 14:14:14'
      },
      {
        id: '4',
        name: 'TGB科技YX公司',
        city: '龙岩',
        employees: 360,
        createdDate: '2013-01-13 13:13:13'
      },
      {
        id: '5',
        name: 'YHN科技YX公司',
        city: '韶关',
        employees: 810,
        createdDate: '2012-12-12 12:12:12'
      }
    ]

    return {
      dropConfig: {
        plugin: Sortable,
        row: true,
        column: false // 取消列拖拽
      },
      tableData,
      record: {
        id: '8',
        name: '深圳市福德宝网络技术YX公司',
        employees: 540,
        city: '厦门',
        createdDate: '2016-06-03 13:53:25'
      }
    }
  }
}
</script>

Step to reproduce

点击 【+】 新增一行数据后,再拖拽行调整数据顺序时失效

image

What is expected

增删数据时,行拖拽需正常调整顺序

What is actually happening

增删数据时,行拖拽未能正常调整顺序

What is your project name

chrisgou

Any additional comments (optional)

No response

@Issues-translate-bot
Copy link

Bot detected the issue body's language is not English, translate it automatically.


Title: 🐛 [Bug]: After adding or deleting data in grid, dragging rows cannot adjust the order normally.

@kagol kagol added the bug Something isn't working label May 25, 2024
@buger121
Copy link

buger121 commented Jun 6, 2024

image
源码刻意禁止了包含新增数据表格的拖动,不清楚为啥

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

4 participants