ci-plus 1.1.7 → 1.1.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ci-plus",
-  "version": "1.1.7",
+  "version": "1.1.8",
   "description": "ci组件库",
   "main": "./index.ts",
   "scripts": {

package/src/sortableTable/sortableTable copy.vue

@@ -0,0 +1,221 @@
+<template>
+  <el-table v-bind="table || {}" :data="data" :header-cell-class-name="setClass" ref="elTableRef">
+    <slot></slot>
+    <sortable-table-column-cell
+      v-if="props.modelValue"
+      v-for="v in rowValue"
+      :key="v.id"
+      :data="v"
+    />
+  </el-table>
+</template>
+<script setup lang="ts">
+defineOptions({ name: 'ci-table' })
+import { CellCls, ElTable } from 'element-plus'
+import Sortable from 'sortablejs'
+import { computed, onBeforeMount, onMounted, ref } from 'vue'
+import { SortableTableIns, SortColumn } from './utils/interface'
+import sortableTableColumnCell from './index/sortableTableColumnCell'
+import { cloneDeep } from 'lodash'
+let props = defineProps<SortableTableIns>()
+const elTableRef = ref<InstanceType<typeof ElTable>>()
+const emits = defineEmits(['update:modelValue', 'update:data'])
+const rowValue = computed({
+  get() {
+    return props.modelValue
+  },
+  set(value) {
+    emits('update:modelValue', value)
+  }
+})
+const data = computed({
+  get() {
+    return props.data
+  },
+  set(value) {
+    emits('update:data', value)
+  }
+})
+
+onBeforeMount(() => {})
+onMounted(() => {
+  columnDrop(elTableRef.value?.$el)
+})
+const columnDrop = (elem?: HTMLTableElement) => {
+  // 如果没有传入elem，则返回
+  if (!elem) return
+  // 获取表格的表头元素
+  const header = elem.querySelector('.el-table__header-wrapper')
+  // 如果没有表头元素，则返回
+  if (!header) return
+  // 设置延时执行函数
+  setTimeout(() => {
+    // 获取表头中的所有行元素
+    const trs = header.querySelectorAll('thead > tr')
+    // 遍历行元素
+    trs.forEach((v) => {
+      let tr = v as HTMLElement
+      // 创建拖拽排序对象
+      Sortable.create(tr, {
+        // 动画时间
+        animation: 180,
+        // 延迟时间
+        delay: 0,
+        // 拖拽元素
+        draggable: '.sortable',
+        // 过滤器
+        filter: (evt, item) => !getLocation(item),
+        // 拖拽排序时触发的函数
+        onMove: ({ dragged, related }) => {
+          // 获取拖拽元素的排序位置
+          let location = getLocation(dragged)
+          // 如果没有排序位置，则返回false
+          if (!location) return false
+          // 获取排序位置的数组
+          const locationArr = location.split('_').slice(1).map(Number)
+          // 判断拖拽元素是否在相关元素之前
+          return inChildren(locationArr[0], getIndex(tr, dragged), getIndex(tr, related))
+        },
+        // 拖拽排序后的函数
+        onUpdate({ oldIndex, newIndex }) {
+          // 如果没有排序值，则返回
+          if (!rowValue.value) return
+          // 如果没有旧的索引和新的索引，则返回
+          if (oldIndex === void 0 || newIndex === void 0) return
+          // 获取旧的th元素
+          let oldTh = tr.children[oldIndex]
+          // 获取新的th元素
+          let newTh = tr.children[newIndex]
+          // 获取旧的排序位置
+          let oldLocation = getLocation(oldTh)
+          // 获取新的排序位置
+          let newLocation = getLocation(newTh)
+          // 如果没有旧的排序位置或者新的排序位置，则返回false
+          if (!oldLocation || !newLocation) return false
+          // 获取旧的排序位置的数组
+          let oldLocationArr = oldLocation.split('_').slice(1).map(Number)
+          // 如果旧的排序位置的第一个元素为1，则减去count
+          if (oldLocationArr[0] === 1) {
+            let count = tr.querySelectorAll('.el-table-fixed-column--left').length
+            newIndex -= count
+            oldIndex -= count
+          }
+          // 获取新的排序位置的数组
+          let newLocationArr = newLocation.split('_').slice(1).map(Number)
+          // 获取旧的路径
+          let oldPath = getPath(oldLocationArr[0], oldIndex)
+          // 获取新的路径
+          let newPath = getPath(newLocationArr[0], newIndex)
+          // 如果没有旧的路径或者新的路径，则返回false
+          if (!oldPath || !newPath) return false
+          // 克隆排序值
+          let tem = cloneDeep(rowValue.value)
+          // 设置新的路径和新的排序值
+          setValue(cloneDeep(getValue(oldPath)), newPath, tem)
+          // 设置旧的路径和旧的排序值
+          setValue(cloneDeep(getValue(newPath)), oldPath, tem)
+          // 设置新的排序值
+          rowValue.value = tem
+        }
+      })
+    })
+  })
+}
+const getIndex = (father: HTMLElement, child: HTMLElement) =>
+  Array.from(father.children).indexOf(child)
+// 获取元素的路径
+const getLocation = (dom: Element) => dom && dom.className.match(/sortable_[0-9]+_[0-9]+/g)?.[0]
+// 判断当前元素是否在当前行中
+const inChildren = (level: number, from: number, to: number) => {
+  if (!rowValue.value) return false
+  if (level === 1) return true
+  let item = levelFlat(level - 1).filter((v) => !v.hide)
+  return getColumnFatherIndex(item, from) === getColumnFatherIndex(item, to)
+}
+// 获取当前元素的父级元素的索引
+const getColumnFatherIndex = (item: SortColumn[], end: number) => {
+  let i = 0
+  while (end >= 0) {
+    const v = item[i]
+    i++
+    if (v.hide) continue
+    let children = v.children
+    if (!children) return false
+    end -= children.length
+  }
+  return i
+}
+// 获取当前元素的路径
+const getPath = (level: number, end: number) => {
+  if (!rowValue.value) return
+  end += hideCount(level, end)
+  if (level === 1) return [end]
+  let path = Array.from({ length: level }).map((v) => 0)
+  if (!end) {
+    f(rowValue.value, 0)
+    path[level - 1] = 0
+  } else
+    while (end > 0) {
+      f(rowValue.value, 0)
+      end--
+    }
+  function f(data: SortColumn[], depth: number) {
+    let flag = 0
+    for (let i = 0; i < data.length; i++) {
+      let v = data[i]
+      if (depth === level - 1) {
+        if (flag !== i) {
+          flag = i
+          path[depth] = 0
+        }
+        path[depth] += 1
+      } else if (v.children) return f(v.children, depth + 1)
+      else path[depth] += 1
+    }
+  }
+  return path
+}
+// 获取当前元素的值
+const getValue = (
+  path: number[],
+  parent?: boolean,
+  data: SortColumn[] = rowValue.value
+): SortColumn => {
+  if (!path.length) path[0] = 0
+  if (path.length <= (parent ? 2 : 1)) return data[path[0]]
+  return getValue(path.slice(1), parent, data[path[0]].children)
+}
+// 设置当前元素的值
+const setValue = (data: SortColumn, path: number[], value: SortColumn[]): SortColumn[] => {
+  if (path.length) {
+    let tem = value[path[0]]
+    if (path.length === 1) value[path[0]] = data
+    else if (tem.children) value[path[0]].children = setValue(data, path.slice(1), tem.children)
+  }
+  return value
+}
+// 计算当前元素的隐藏数量
+const hideCount = (level: number, index: number) =>
+  levelFlat(level)
+    .slice(0, index + 1)
+    .filter((v) => v.hide).length
+// 获取当前行的数据
+const levelFlat = (level: number, data = rowValue.value): SortColumn[] => {
+  if (level > 1)
+    return levelFlat(
+      level - 1,
+      data.filter((v) => v.children).flatMap((v) => v.children) as SortColumn[]
+    )
+  return data
+}
+// 设置当前元素的类名
+const setClass: CellCls<typeof props.data> = ({ column }) => {
+  let className = props.table?.headerCellClassName || ''
+  if (!column.fixed && column.id) {
+    className += ` sortable sortable_${column.level}_${column.no}`
+  }
+  return className as string
+}
+defineExpose({ table: elTableRef })
+</script>
+<style scoped></style>

package/src/sortableTable/sortableTable.vue

@@ -1,11 +1,22 @@
 <template>
-  <el-table v-bind="table || {}" :data="data" :header-cell-class-name="setClass" ref="elTableRef">
+  <el-table
+    v-bind="table || {}"
+    :header-cell-class-name="setClass"
+    :data="data"
+    ref="elTableRef"
+    @vue:mounted="columnDrop"
+  >
     <slot></slot>
+    <!-- <sortable-table-column-cell v-if="props.modelValue" v-for="v in rowValue" :key="v.id" :data="v" /> -->
     <sortable-table-column-cell
+      :label-class-name="`sortable sortable_0_0_${i}`"
+      :i="0"
+      :level="0"
       v-if="props.modelValue"
-      v-for="v in rowValue"
+      v-for="(v, i) in rowValue"
       :key="v.id"
       :data="v"
+      :no-search="noSearch"
     />
   </el-table>
 </template>
@@ -13,7 +24,7 @@
 defineOptions({ name: 'ci-table' })
 import { CellCls, ElTable } from 'element-plus'
 import Sortable from 'sortablejs'
-import { computed, onBeforeMount, onMounted, ref } from 'vue'
+import { VNode, computed, ref } from 'vue'
 import { SortableTableIns, SortColumn } from './utils/interface'
 import sortableTableColumnCell from './index/sortableTableColumnCell'
 import { cloneDeep } from 'lodash'
@@ -37,177 +48,112 @@ const data = computed({
   }
 })
 
-onBeforeMount(() => {})
-onMounted(() => {
-  columnDrop(elTableRef.value?.$el)
-})
-const columnDrop = (elem?: HTMLTableElement) => {
+// 只能同行并在同一个children中可以拖拽
+const columnDrop = (vnode: VNode) => {
+  if (props.noMove) return
+  const elem = vnode.el as HTMLDivElement
   // 如果没有传入elem，则返回
   if (!elem) return
   // 获取表格的表头元素
   const header = elem.querySelector('.el-table__header-wrapper')
   // 如果没有表头元素，则返回
   if (!header) return
-  // 设置延时执行函数
-  setTimeout(() => {
-    // 获取表头中的所有行元素
-    const trs = header.querySelectorAll('thead > tr')
-    // 遍历行元素
-    trs.forEach((v) => {
-      let tr = v as HTMLElement
-      // 创建拖拽排序对象
-      Sortable.create(tr, {
-        // 动画时间
-        animation: 180,
-        // 延迟时间
-        delay: 0,
-        // 拖拽元素
-        draggable: '.sortable',
-        // 过滤器
-        filter: (evt, item) => !getLocation(item),
-        // 拖拽排序时触发的函数
-        onMove: ({ dragged, related }) => {
-          // 获取拖拽元素的排序位置
-          let location = getLocation(dragged)
-          // 如果没有排序位置，则返回false
-          if (!location) return false
-          // 获取排序位置的数组
-          const locationArr = location.split('_').slice(1).map(Number)
-          // 判断拖拽元素是否在相关元素之前
-          return inChildren(locationArr[0], getIndex(tr, dragged), getIndex(tr, related))
-        },
-        // 拖拽排序后的函数
-        onUpdate({ oldIndex, newIndex }) {
-          // 如果没有排序值，则返回
-          if (!rowValue.value) return
-          // 如果没有旧的索引和新的索引，则返回
-          if (oldIndex === void 0 || newIndex === void 0) return
-          // 获取旧的th元素
-          let oldTh = tr.children[oldIndex]
-          // 获取新的th元素
-          let newTh = tr.children[newIndex]
-          // 获取旧的排序位置
-          let oldLocation = getLocation(oldTh)
-          // 获取新的排序位置
-          let newLocation = getLocation(newTh)
-          // 如果没有旧的排序位置或者新的排序位置，则返回false
-          if (!oldLocation || !newLocation) return false
-          // 获取旧的排序位置的数组
-          let oldLocationArr = oldLocation.split('_').slice(1).map(Number)
-          // 如果旧的排序位置的第一个元素为1，则减去count
-          if (oldLocationArr[0] === 1) {
-            let count = tr.querySelectorAll('.el-table-fixed-column--left').length
-            newIndex -= count
-            oldIndex -= count
-          }
-          // 获取新的排序位置的数组
-          let newLocationArr = newLocation.split('_').slice(1).map(Number)
-          // 获取旧的路径
-          let oldPath = getPath(oldLocationArr[0], oldIndex)
-          // 获取新的路径
-          let newPath = getPath(newLocationArr[0], newIndex)
-          // 如果没有旧的路径或者新的路径，则返回false
-          if (!oldPath || !newPath) return false
-          // 克隆排序值
-          let tem = cloneDeep(rowValue.value)
-          // 设置新的路径和新的排序值
-          setValue(cloneDeep(getValue(oldPath)), newPath, tem)
-          // 设置旧的路径和旧的排序值
-          setValue(cloneDeep(getValue(newPath)), oldPath, tem)
-          // 设置新的排序值
-          rowValue.value = tem
+  // 获取表头中的所有行元素
+  const trs = header.querySelectorAll('thead > tr')
+  // 遍历行元素
+  trs.forEach((v) => {
+    let tr = v as HTMLElement
+    // 创建拖拽排序对象
+    Sortable.create(tr, {
+      // 动画时间
+      animation: 180,
+      // 延迟时间
+      delay: 0,
+      // 拖拽元素
+      draggable: '.sortable',
+      // 过滤器
+      filter: (evt, item) => !canDrag(item),
+      // 拖拽排序时触发的函数
+      onMove: ({ dragged, related }) => {
+        return isSameGroup(dragged, related)
+      },
+      // 拖拽排序后的函数
+      onUpdate({ newIndex, item }) {
+        const location = getLocation(item)
+        if (!location) return
+        if (typeof newIndex !== 'number') return
+        let newArr: SortColumn[] = []
+        const newItem = header.querySelector(`.sortable_index_${location[0]}_${newIndex}`)
+        if (!newItem) return
+        const newLocation = getLocation(newItem)
+        if (!newLocation) return
+        if (!location[0]) {
+          rowValue.value.forEach((v, i) => {
+            if (i === newLocation[2]) {
+              if (location[2] > newLocation[2]) {
+                newArr.push(rowValue.value[location[2]])
+                newArr.push(v)
+              } else {
+                newArr.push(v)
+                newArr.push(rowValue.value[location[2]])
+              }
+            } else if (i !== location[2]) newArr.push(v)
+          })
+        } else {
+          newArr = cloneDeep(rowValue.value)
+          const tem: SortColumn[] = []
+          loop(newArr, location[0] - 1, (v, i) => {
+            if (i === location[1]) {
+              v.children?.forEach((x, j) => {
+                if (j === newLocation[2]) {
+                  if (location[2] > newLocation[2]) {
+                    tem.push((v.children as SortColumn[])[location[2]])
+                    tem.push(x)
+                  } else {
+                    tem.push(x)
+                    tem.push((v.children as SortColumn[])[location[2]])
+                  }
+                } else if (j !== location[2]) tem.push(x)
+              })
+              v.children = tem
+              return true
+            }
+          })
         }
-      })
+        rowValue.value = newArr
+      }
     })
   })
 }
-const getIndex = (father: HTMLElement, child: HTMLElement) =>
-  Array.from(father.children).indexOf(child)
-// 获取元素的路径
-const getLocation = (dom: Element) => dom && dom.className.match(/sortable_[0-9]+_[0-9]+/g)?.[0]
-// 判断当前元素是否在当前行中
-const inChildren = (level: number, from: number, to: number) => {
-  if (!rowValue.value) return false
-  if (level === 1) return true
-  let item = levelFlat(level - 1).filter((v) => !v.hide)
-  return getColumnFatherIndex(item, from) === getColumnFatherIndex(item, to)
-}
-// 获取当前元素的父级元素的索引
-const getColumnFatherIndex = (item: SortColumn[], end: number) => {
-  let i = 0
-  while (end >= 0) {
-    const v = item[i]
-    i++
-    if (v.hide) continue
-    let children = v.children
-    if (!children) return false
-    end -= children.length
-  }
-  return i
-}
-// 获取当前元素的路径
-const getPath = (level: number, end: number) => {
-  if (!rowValue.value) return
-  end += hideCount(level, end)
-  if (level === 1) return [end]
-  let path = Array.from({ length: level }).map((v) => 0)
-  if (!end) {
-    f(rowValue.value, 0)
-    path[level - 1] = 0
-  } else
-    while (end > 0) {
-      f(rowValue.value, 0)
-      end--
-    }
-  function f(data: SortColumn[], depth: number) {
-    let flag = 0
-    for (let i = 0; i < data.length; i++) {
-      let v = data[i]
-      if (depth === level - 1) {
-        if (flag !== i) {
-          flag = i
-          path[depth] = 0
-        }
-        path[depth] += 1
-      } else if (v.children) return f(v.children, depth + 1)
-      else path[depth] += 1
-    }
+
+// 循环指定层级
+const loop = (
+  arr: SortColumn[],
+  level: number,
+  fun: (v: SortColumn, i: number) => boolean | void
+) => {
+  for (let i = 0; i < arr.length; i++) {
+    const v = arr[i]
+    if (level && v.children) loop(v.children, level - 1, fun)
+    if (fun(v, i)) break
   }
-  return path
-}
-// 获取当前元素的值
-const getValue = (
-  path: number[],
-  parent?: boolean,
-  data: SortColumn[] = rowValue.value
-): SortColumn => {
-  if (!path.length) path[0] = 0
-  if (path.length <= (parent ? 2 : 1)) return data[path[0]]
-  return getValue(path.slice(1), parent, data[path[0]].children)
 }
-// 设置当前元素的值
-const setValue = (data: SortColumn, path: number[], value: SortColumn[]): SortColumn[] => {
-  if (path.length) {
-    let tem = value[path[0]]
-    if (path.length === 1) value[path[0]] = data
-    else if (tem.children) value[path[0]].children = setValue(data, path.slice(1), tem.children)
-  }
-  return value
+// 判断这个元素是否可以拖拽
+const canDrag = (dom: Element) => dom && /sortable_[0-9]+_[0-9]+/g.test(dom.className)
+// 获取这个元素在数据内的位置
+const getLocation = (dom: Element) => {
+  const name = dom && dom.className.match(/\bsortable(_[0-9]+)+\b/)?.[0]
+  if (!name) return
+  return name.split('_').slice(1).map(Number)
 }
-// 计算当前元素的隐藏数量
-const hideCount = (level: number, index: number) =>
-  levelFlat(level)
-    .slice(0, index + 1)
-    .filter((v) => v.hide).length
-// 获取当前行的数据
-const levelFlat = (level: number, data = rowValue.value): SortColumn[] => {
-  if (level > 1)
-    return levelFlat(
-      level - 1,
-      data.filter((v) => v.children).flatMap((v) => v.children) as SortColumn[]
-    )
-  return data
+// 判断这个元素是否在一起
+const isSameGroup = (dom1: Element, dom2: Element) => {
+  const location1 = getLocation(dom1)
+  const location2 = getLocation(dom2)
+  if (!location1 || !location2) return false
+  return location1[1] === location2[1]
 }
+
 // 设置当前元素的类名
 const setClass: CellCls<typeof props.data> = ({ column }) => {
   let className = props.table?.headerCellClassName || ''

package/src/sortableTable/utils/sortableTableColumnCell.vue

@@ -1,16 +1,13 @@
-<!-- /*
-* @module sortableTableColumnCell
-* @author : 杨佳贺&卖女孩的小火柴
-* @description : 表格列单元格
-* @version : 1.0.0
-* @since : 创建时间 2023-12-29 13:40:49
-* @lastTime : 2023-12-29 新增默认居中显示属性
-* @lastTime : 2024-01-03 新增默认超出隐藏悬停显示、拖拽改变列宽
-*/ -->
-
 <template>
   <el-table-column v-if="!data.hide && data.children" v-bind="data.col">
-    <sortable-table-column-cell v-for="v in data.children || []" :key="v.key" :data="v" />
+    <sortable-table-column-cell
+      :label-class-name="`sortable sortable_${level}_${i}_${j}`"
+      :i="j"
+      v-for="(v, j) in data.children || []"
+      :key="v.key"
+      :data="v"
+      :level="props.level + 1"
+    />
   </el-table-column>
   <el-table-column
     v-else-if="!data.hide && data.scope"
@@ -26,6 +23,7 @@
       <component :is="headerVue(header)" :header="header"></component>
     </template>
   </el-table-column>
+
   <el-table-column
     v-else-if="!data.hide && data.component"
     v-bind="data.col"
@@ -40,6 +38,7 @@
       <component :is="headerVue(header)" :header="header"></component>
     </template>
   </el-table-column>
+
   <el-table-column
     v-else-if="!data.hide"
     v-bind="data.col"
@@ -53,14 +52,18 @@
   </el-table-column>
 </template>
 <script setup lang="ts">
+defineOptions({ name: 'ci-columncell' })
 import { Scope, SortColumn } from './interface'
 import { h } from 'vue'
-defineOptions({ name: 'ci-columncell' })
 
 const props = defineProps<{
   data: SortColumn
+  level?: number
+  i?: number
+  noSearch?: boolean
 }>()
 const headerVue = (header: Pick<Scope<any>, '$index' | 'column'>) => {
+  if (props.noSearch) return h('div', props.data.col.label)
   const item = props.data.header?.(h, header)
   if (!item) return h('div', props.data.col.label)
   if (typeof item === 'string') return h('div', item)

package/src/sortableTable/utils/sortableTableColumnCell2.vue

@@ -1,63 +1,61 @@
+<!-- /*
+* @module sortableTableColumnCell
+* @author : 杨佳贺&卖女孩的小火柴
+* @description : 表格列单元格
+* @version : 1.0.0
+* @since : 创建时间 2023-12-29 13:40:49
+* @lastTime : 2023-12-29 新增默认居中显示属性
+* @lastTime : 2024-01-03 新增默认超出隐藏悬停显示、拖拽改变列宽
+*/ -->
+
 <template>
-  <el-table-column
-    v-if="!data.hide && data.children"
-    v-bind="data.col"
-  >
-    <sortable-table-column-cell
-      v-for="v in data.children || []"
-      :key="v.key"
-      :data="v"
-    />
+  <el-table-column v-if="!data.hide && data.children" v-bind="data.col">
+    <sortable-table-column-cell v-for="v in data.children || []" :key="v.key" :data="v" />
   </el-table-column>
   <el-table-column
     v-else-if="!data.hide && data.scope"
     v-bind="data.col"
+    :align="data.col.align || 'center'"
+    :showOverflowTooltip="data.col.showOverflowTooltip || true"
+    :resizable="data.col.resizable || true"
   >
     <template #default="scope">
       {{ data.scope(scope) }}
     </template>
     <template #header="header">
-      <component
-        :is="headerVue(header)"
-        :header="header"
-      ></component>
+      <component :is="headerVue(header)" :header="header"></component>
     </template>
   </el-table-column>
   <el-table-column
     v-else-if="!data.hide && data.component"
     v-bind="data.col"
+    :align="data.col.align || 'center'"
+    :showOverflowTooltip="data.col.showOverflowTooltip || true"
+    :resizable="data.col.resizable || true"
   >
     <template #default="scope">
-      <component
-        :is="data.component(h, scope)"
-        :scope="scope"
-      ></component>
+      <component :is="data.component(h, scope)" :scope="scope"></component>
     </template>
     <template #header="header">
-      <component
-        :is="headerVue(header)"
-        :header="header"
-      ></component>
+      <component :is="headerVue(header)" :header="header"></component>
     </template>
   </el-table-column>
   <el-table-column
     v-else-if="!data.hide"
     v-bind="data.col"
+    :align="data.col.align || 'center'"
+    :showOverflowTooltip="data.col.showOverflowTooltip || true"
+    :resizable="data.col.resizable || true"
   >
     <template #header="header">
-      <component
-        :is="headerVue(header)"
-        :header="header"
-      ></component>
+      <component :is="headerVue(header)" :header="header"></component>
     </template>
   </el-table-column>
 </template>
 <script setup lang="ts">
 import { Scope, SortColumn } from './interface'
 import { h } from 'vue'
-defineOptions({
-  name: 'sortable-table-column-cell',
-})
+defineOptions({ name: 'ci-columncell' })
 
 const props = defineProps<{
   data: SortColumn

package/src/sortableTable/utils/sortableTableDragItem.vue

@@ -1,61 +1,54 @@
-<!-- 2023-12-29 新增显示/隐藏按钮 -->
-
 <template>
-  <draggable
+  <vue-draggable
     class="drag-container"
-    :list="modelValue"
+    v-model="modelValue"
     chosen-class="hover"
     handle=".mover"
     draggable=".item"
     itemKey="key"
   >
-    <template #item="{ element, index }: { element: SortColumn; index: number }">
-      <div :class="{ item: true, 'item-hide': element.hide }">
-        <div class="mover">
-          <el-icon :size="16"><Rank /></el-icon>
-        </div>
-        <div class="title" @click="handleShow(element)">
-          {{ element.col.label }}
-        </div>
-        <div class="pin" v-if="showPin">
-          <span
-            v-if="element.col.fixed === true || element.col.fixed === 'left'"
-            @click="element.col.fixed = void 0"
-          >
-            <svg-icon name="regular-left" size="20" color="#2C93FF"></svg-icon>
-          </span>
-          <span v-else @click="element.col.fixed = 'left'">
-            <svg-icon name="regular-center" size="20"></svg-icon>
-          </span>
-          <span v-if="element.col.fixed === 'right'" @click="element.col.fixed = void 0">
-            <svg-icon name="regular-right" size="20" color="#2C93FF"></svg-icon>
-          </span>
-          <span v-else @click="element.col.fixed = 'right'">
-            <svg-icon name="regular-center" size="20"></svg-icon>
-          </span>
-        </div>
-        <div class="ifshow">
-          <el-button
-            :type="element.hide ? 'primary' : ''"
-            @click="handleShow(element)"
-            size="small"
-          >
-            {{ element.hide ? '显示' : '隐藏' }}
-          </el-button>
-        </div>
-        <div class="widths">
-          宽度：
-          <el-input class="w-50 m-2" v-model="element.col.width" size="small" width="50"></el-input>
-        </div>
-        <sortable-table-drag-item v-if="element.children" v-model="element.children" />
+    <div v-for="(element, index) in modelValue" :class="{ item: true, 'item-hide': element.hide }">
+      <div class="mover">
+        <el-icon :size="16"><Rank /></el-icon>
+      </div>
+      <div class="title" @click="element.hide = !element.hide">
+        {{ element.col.label }}
+      </div>
+      <div class="pin" v-if="showPin">
+        <span
+          v-if="element.col.fixed === true || element.col.fixed === 'left'"
+          @click="element.col.fixed = void 0"
+        >
+          <svg-icon name="regular-left" size="20" color="#2C93FF"></svg-icon>
+        </span>
+        <span v-else @click="element.col.fixed = 'left'">
+          <svg-icon name="regular-center" size="20"></svg-icon>
+        </span>
+        <span v-if="element.col.fixed === 'right'" @click="element.col.fixed = void 0">
+          <svg-icon name="regular-right" size="20" color="#2C93FF"></svg-icon>
+        </span>
+        <span v-else @click="element.col.fixed = 'right'">
+          <svg-icon name="regular-center" size="20"></svg-icon>
+        </span>
+      </div>
+      <div class="ifshow">
+        <el-button :type="element.hide ? 'primary' : ''" @click="handleShow(element)" size="small">
+          {{ element.hide ? '显示' : '隐藏' }}
+        </el-button>
+      </div>
+      <div class="widths">
+        宽度：
+        <el-input class="w-50 m-2" v-model="element.col.width" size="small" width="50"></el-input>
       </div>
-    </template>
-  </draggable>
+      <sortable-table-drag-item v-if="element.children" v-model="element.children" />
+    </div>
+  </vue-draggable>
 </template>
 <script setup lang="ts">
 import SvgIcon from '../../svgIcon/index'
 import { computed } from 'vue'
-import draggable from 'vuedraggable'
+// import draggable from 'vuedraggable'
+import { VueDraggable } from 'vue-draggable-plus'
 import { SortColumn, SortableTableIns } from './interface'
 import { Rank } from '@element-plus/icons-vue'
 const props = defineProps<{

package/src/sortableTable/utils/sortableTableDragItem2.vue

@@ -1,86 +1,117 @@
-<!-- @format -->
+<!-- 2023-12-29 新增显示/隐藏按钮 -->
 
 <template>
-  <draggable
+  <!-- <vue-draggable
     class="drag-container"
     :list="modelValue"
     chosen-class="hover"
     handle=".mover"
     draggable=".item"
     itemKey="key"
+  > -->
+  <vue-draggable
+    class="drag-container"
+    v-model="modelValue"
+    chosen-class="hover"
+    handle=".mover"
+    draggable=".item"
+    itemKey="key"
   >
-    <template
-      #item="{ element, index }: { element: SortColumn; index: number }"
-    >
+    <!-- <template #item="{ element, index }: { element: SortColumn; index: number }">
       <div :class="{ item: true, 'item-hide': element.hide }">
         <div class="mover">
           <el-icon :size="16"><Rank /></el-icon>
         </div>
-        <div
-          class="title"
-          @click="element.hide = !element.hide"
-        >
+        <div class="title" @click="handleShow(element)">
           {{ element.col.label }}
         </div>
-        <div
-          class="pin"
-          v-if="showPin"
-        >
+        <div class="pin" v-if="showPin">
           <span
             v-if="element.col.fixed === true || element.col.fixed === 'left'"
             @click="element.col.fixed = void 0"
           >
-            <!-- <el-icon color="#409EFC" class="no-inherit" > <StarFilled /> </el-icon> -->
-            <svg-icon
-              name="regular-left"
-              size="20"
-              color="#2C93FF"
-            ></svg-icon>
+            <svg-icon name="regular-left" size="20" color="#2C93FF"></svg-icon>
           </span>
-          <span
-            v-else
-            @click="element.col.fixed = 'left'"
-          >
-            <!-- <el-icon color="#000000" class="no-inherit"><Star /></el-icon> -->
-            <svg-icon
-              name="regular-center"
-              size="20"
-            ></svg-icon>
+          <span v-else @click="element.col.fixed = 'left'">
+            <svg-icon name="regular-center" size="20"></svg-icon>
           </span>
-          <span
-            v-if="element.col.fixed === 'right'"
-            @click="element.col.fixed = void 0"
-          >
-            <!-- <el-icon color="#409EFC" class="no-inherit"> <StarFilled /> </el-icon> -->
-            <svg-icon
-              name="regular-right"
-              size="20"
-              color="#2C93FF"
-            ></svg-icon>
+          <span v-if="element.col.fixed === 'right'" @click="element.col.fixed = void 0">
+            <svg-icon name="regular-right" size="20" color="#2C93FF"></svg-icon>
           </span>
-          <span
-            v-else
-            @click="element.col.fixed = 'right'"
-          >
-            <!-- <el-icon color="#000000" class="no-inherit"><Star /></el-icon> -->
-            <svg-icon
-              name="regular-center"
-              size="20"
-            ></svg-icon>
+          <span v-else @click="element.col.fixed = 'right'">
+            <svg-icon name="regular-center" size="20"></svg-icon>
           </span>
         </div>
-        <sortable-table-drag-item
-          v-if="element.children"
-          v-model="element.children"
-        />
+        <div class="ifshow">
+          <el-button
+            :type="element.hide ? 'primary' : ''"
+            @click="handleShow(element)"
+            size="small"
+          >
+            {{ element.hide ? '显示' : '隐藏' }}
+          </el-button>
+        </div>
+        <div class="widths">
+          宽度：
+          <el-input class="w-50 m-2" v-model="element.col.width" size="small" width="50"></el-input>
+        </div>
+        <sortable-table-drag-item v-if="element.children" v-model="element.children" />
+      </div>
+    </template> -->
+    <div v-for="(element, index) in modelValue" :class="{ item: true, 'item-hide': element.hide }">
+      <div class="mover">
+        <el-icon :size="16"><Rank /></el-icon>
+      </div>
+      <div class="title" @click="element.hide = !element.hide">
+        {{ element.col.label }}
+      </div>
+      <div class="pin" v-if="showPin">
+        <!-- <span v-if="element.col.fixed === true || element.col.fixed === 'left'" @click="element.col.fixed = void 0">
+          <var-icon name="pin-off" :size="16" style="transform: rotate(-30deg); color: cadetblue" />
+        </span>
+        <span v-else @click="element.col.fixed = 'left'">
+          <var-icon name="pin" :size="16" style="transform: rotate(-30deg)" />
+        </span>
+        <span v-if="element.col.fixed === 'right'" @click="element.col.fixed = void 0">
+          <var-icon name="pin-off" :size="16" style="transform: scaleX(-1) rotate(-30deg); color: cadetblue" />
+        </span>
+        <span v-else @click="element.col.fixed = 'right'">
+          <var-icon name="pin" :size="16" style="transform: rotate(30deg)" />
+        </span> -->
+        <span
+          v-if="element.col.fixed === true || element.col.fixed === 'left'"
+          @click="element.col.fixed = void 0"
+        >
+          <svg-icon name="regular-left" size="20" color="#2C93FF"></svg-icon>
+        </span>
+        <span v-else @click="element.col.fixed = 'left'">
+          <svg-icon name="regular-center" size="20"></svg-icon>
+        </span>
+        <span v-if="element.col.fixed === 'right'" @click="element.col.fixed = void 0">
+          <svg-icon name="regular-right" size="20" color="#2C93FF"></svg-icon>
+        </span>
+        <span v-else @click="element.col.fixed = 'right'">
+          <svg-icon name="regular-center" size="20"></svg-icon>
+        </span>
+      </div>
+      <div class="ifshow">
+        <el-button :type="element.hide ? 'primary' : ''" @click="handleShow(element)" size="small">
+          {{ element.hide ? '显示' : '隐藏' }}
+        </el-button>
       </div>
-    </template>
-  </draggable>
+      <div class="widths">
+        宽度：
+        <el-input class="w-50 m-2" v-model="element.col.width" size="small" width="50"></el-input>
+      </div>
+      <sortable-table-drag-item v-if="element.children" v-model="element.children" />
+    </div>
+  </vue-draggable>
 </template>
 <script setup lang="ts">
-import SvgIcon from '@/components/SvgIcon.vue'
+import SvgIcon from '../../svgIcon/index'
 import { computed } from 'vue'
-import draggable from 'vuedraggable'
+// import draggable from 'vuedraggable'
+import { VueDraggable } from 'vue-draggable-plus'
 import { SortColumn, SortableTableIns } from './interface'
 import { Rank } from '@element-plus/icons-vue'
 const props = defineProps<{
@@ -94,14 +125,20 @@ const modelValue = computed({
   },
   set(value) {
     emits('update:modelValue', value)
-  },
+  }
 })
+
+// 显示或者隐藏列
+const handleShow = (col: SortColumn) => {
+  // console.log('显示或者隐藏列', col)
+  col.hide = !col.hide
+}
 </script>
 <style scoped lang="scss">
 $hoverBC: rgba(137, 182, 233, 0.5);
 
 .drag-container {
-  display: flex;
+  // display: flex;
   width: 100%;
   flex-direction: column;
 
@@ -110,6 +147,7 @@ $hoverBC: rgba(137, 182, 233, 0.5);
     display: flex;
     align-items: center;
     white-space: nowrap;
+    width: 100%;
     .mover,
     .title {
       padding: 5px;
@@ -133,6 +171,20 @@ $hoverBC: rgba(137, 182, 233, 0.5);
         padding: 5px;
       }
     }
+    .ifshow {
+      text-align: center;
+      flex: 1;
+      line-height: 32px;
+      .el-button {
+        margin-bottom: 0;
+      }
+    }
+    .widths {
+      .el-input {
+        width: 50px !important;
+        margin-right: 20px;
+      }
+    }
   }
   .item-hide {
     background: rgba(218, 218, 218, 0.5);