vue3+Naive UI库表格实现行上下拖拽排序的效果

1.由来

由于naive UI库本身没有对表格行,进行上下拖拽排序的功能,因此使用了sortablejs.js库继续开发业务需求

2.简单的使用

1.导入sortablejs.js

npm install sortablejs --save

2.找到项目中需要使用拖拽效果的表格页面导入

import Sortable from 'sortablejs'

3.找到目标表格通过ref属性定义并获取dom元素

  <BasicTable
        :loading="loading"
        :columns="columns"
        :dataSource="dataSource"
        :row-key="(row) => row.id"
        ref="tableRef"
        :autoScrollX="true"
        :actionColumn="actionColumn"
        :pagination="paginationReactive"
      >
        <template #tableTitle>
          <n-button v-if="hasPermission([permissions.Create])" type="primary" :size="getAppSize" @click="handleCreate">
            <template #icon>
              <n-icon>
                <PlusOutlined />
              </n-icon>
            </template>
            {{ t('Create') }}
          </n-button>
        </template>
      </BasicTable>

import { h, ref, reactive, onMounted } from 'vue'
import Sortable from 'sortablejs'

const tableRef = ref()
const sortable = ref()

4.定义一个实现拖拽的方法函数

注意: 1.vue3 和 vue2 获取元素的方法有所区别

2.el 获取值需要配合浏览器F12 元素审查查找类名,由于项目中表格组件进行了封装,因此类名获取会很长

3.* sortable元素中 .my-handle类名可以自定义样式*

function setSort() {
  const el = tableRef.value.$el.querySelectorAll(
    '.s-table > .n-data-table >   .n-data-table-wrapper > .n-data-table-base-table > .n-data-table-base-table-body  > .n-scrollbar-container > .n-scrollbar-content >  table > tbody ',
  )[0]

  sortable.value = Sortable.create(el, {
    ghostClass: 'sortable-ghost',
    handle: '.my-handle',
    setData: function (dataTransfer) {
      dataTransfer.setData('Text', '')
    },
    onEnd: (e) => {
      console.log(e)
      //这里拖拽结束可以进行项目中的业务逻辑代码,e值可在文档配置中找到需要的配置值
    },
  })
}


<style lang="less" scoped>
:deep(.sortable-ghost) {
  opacity: 0.8;
  color: #fff !important;
  background: #42b983 !important;
}

:deep(.n-data-table .n-data-table-td .my-handle) {
  display: block;
  cursor: move;
  cursor: -webkit-grabbing;
}
</style>

5.实现拖拽的方法在生命周期使用

注意:1.拖拽的方法一般需要在挂载的生命周期中使用,即数据加载完毕,页面元素完成后

onMounted(async () => {
  await loadData()
  setSort()
})

6.实现的效果

1.拖拽前

拖拽前.png

2.拖拽中

拖拽中.png

3.拖拽后

拖拽后.png

6.关于表格中操作行图标和位置

由于是使用的Naive UI 库中的表格组件,因此在官方文档中可以自定义配置需要的样式效果

Naive UI 文档地址www.naiveui.com/zh-CN/os-th…

import { h } from 'vue'
import { NIcon } from 'naive-ui'
import { Move } from '@vicons/ionicons5'
export const columns: any[] = [
  {
    title: '序号',
    key: 'index',
    width: 70,
  },
  {
    title: '操作',
    key: 'index',
    width: 70,
    align: 'center',
    render: () => h('div', { class: 'my-handle' }, h(NIcon, {}, { default: () => h(Move, { style: { color: '#333333' } }) })),
  },
  {
    title: '名称',
    key: 'name',
  },
]

Vue3 + naive UI 表格行上下拖拽

vue3+Naive UI库表格实现行上下拖拽排序的效果

1.由来

2.简单的使用