ColumnSetting 是否能够实现 CRUD 拖拽行？

[tolking]

ColumnSetting 是否能够实现 CRUD 拖拽行？

[tolking]

这个组件是基于 ElTree 的，在这个组件中的节点直接就可以拖动

[InfernalAzazel]

这个组件是基于 ElTree 的，在这个组件中的节点直接就可以拖动

这个组件是基于 ElTree 的，在这个组件中的节点直接就可以拖动

这么说 CRUD 是可以拖动的这样的话掉打 vue antdv 了

如果文档能加个例子就好了

[tolking]

是 ColumnSetting 这个组件的节点可以拖，文档自己就可以试。拖动后表格的列随之变化

[InfernalAzazel]

请指教一下我这个code 是没实现拖动？
拖动没反应

template>
  <pro-card>
    <pro-crud
        v-model="form"
        v-model:search="serachForm"
        :columns="columns"
        :menu="menu"
        :data="data"
        :detail="detail"
        :before-open="beforeOpen"
        label-width="100px"
        @search="search"
        @submit="submit"
        @delete="deleteRow"
        row-key="key"
        :table-columns="tableColumns"
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :total="total"
        icon-class="Grid"
        show-overflow-tooltip
    >
      <template #action>
        <pro-column-setting
            v-model="tableColumns"
            highlight-current
            icon-class="Grid"
            trigger="click"
            check-on-click-node
            :allow-drag="(node) => console.log(node)"
            :allow-drop="(draggingNode, dropNode, type)=>console.log(draggingNode)"
        />
      </template>
    </pro-crud>
  </pro-card>
</template>

<script lang="ts" setup>
import {ref} from 'vue'
import {ElMessage} from 'element-plus'
import {
  defineCrudColumns,
  defineCrudSubmit,
  defineCrudSearch,
  defineCrudBeforeOpen, defineCrudMenuColumns,
} from 'element-pro-components'

const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(50)
const form = ref({})
const serachForm = ref({})
const detail = ref({})
const menu = defineCrudMenuColumns({
  label: 'Operations',
  addText: 'New',
  detailText: '详细',
  editText: '编辑',
  delText: '删除',
  searchText: 'Search',
  searchResetText: 'Reset Search',
  submitText: '提交',
  resetText: 'Reset Form',
  detail: true,
  edit: true,
  del: true,
  searchReset: true,
  fixed:'right',
  width:'200'
  // detailProps: { type: 'success', plain: false },
  // editProps: { type: 'default', plain: true },
  // delProps: { type: 'info', plain: true },
})
const columns = defineCrudColumns([
  {
    label: 'ID',
    prop: 'id',
    component: 'el-input',
    add: true,
    edit: true,
    search: true,
    detail: true,
    width: '200',
  },
  {
    label: '路由名称（标记）',
    prop: 'name',
    component: 'el-input',
    add: true,
    edit: true,
    search: true,
    detail: true,
    width: '200'
  },
  {
    label: 'URL路径',
    prop: 'path',
    component: 'el-input',
    add: true,
    search: true,
    detail: true,
    width: '500'
  },
  {
    label: '是否隐藏',
    prop: 'visible',
    component: 'el-input',
    add: true,
    edit: true,
    detail: true,
    width: '200'
  },
  {
    label: '节点',
    prop: 'node',
    component: 'el-input',
    add: true,
    edit: true,
    search: true,
    detail: true,
    width: '200'
  },
  {
    label: '父节点',
    prop: 'parent_node',
    component: 'el-input',
    add: true,
    edit: true,
    detail: true,
    width: '200'
  },
  {
    label: '排序',
    prop: 'sort',
    component: 'el-input',
    add: true,
    edit: true,
    detail: true,
    width: '200'
  },
  {
    label: '页面路径',
    prop: 'page_path',
    component: 'el-input',
    add: true,
    edit: true,
    detail: true,
    width: '200'
  },
  {
    label: '图标',
    prop: 'icon',
    component: 'el-input',
    add: true,
    edit: true,
    detail: true,
    width: '200'
  },
])
const tableColumns = ref(JSON.parse(JSON.stringify(columns)))

const data = ref([
  {
    key: '1',
    id: '1',
    node: 1,
    name: 'Tom',
    path: '11',
    visible: 'No. 189, Grove St, Los Angeles0000000000000000000000000000000000000000000000000',
    parent_node: 1,
    sort: 1,
    page_path: 1,
    icon: '11',

  },
  {
    key: '2',
    id: '1',
    node: 1,
    name: 'Tom',
    path: '11',
    visible: 'No. 189, Grove St, Los Angeles',
    parent_node: 1,
    sort: 1,
    page_path: 1,
    icon: '11',
    children: [
      {
        key: '3',
        id: '1',
        node: 1,
        name: 'Tom',
        path: '11',
        visible: 'No. 189, Grove St, Los Angeles',
        parent_node: 1,
        sort: 1,
        page_path: 1,
        icon: '11',
        children: [
          {
            key: '10',
            id: '1',
            node: 1,
            name: 'Tom',
            path: '11',
            visible: 'No. 189, Grove St, Los Angeles',
            parent_node: 1,
            sort: 1,
            page_path: 1,
            icon: '11',
          },
        ]
      }
    ]
  },
])

const beforeOpen = defineCrudBeforeOpen((done, type, row) => {
  if (type === 'edit') {
    form.value = row || {}
  } else if (type === 'detail') {
    detail.value = row || {}
  }
  done()
})

const search = defineCrudSearch((done, isValid, invalidFields) => {
  ElMessage(`search: ${isValid}`)
  console.log('search', serachForm.value, isValid, invalidFields)
  setTimeout(() => {
    done()
  }, 1000)
})

const submit = defineCrudSubmit(
    (close, done, type, isValid, invalidFields) => {
      ElMessage(`submit: ${type}, ${isValid}`)
      console.log('submit', form.value, type, isValid, invalidFields)
      setTimeout(() => {
        isValid ? close() : done()
      }, 1000)
    }
)

const deleteRow = (row: any) => {
  ElMessage('deleteRow')
  console.log('deleteRow', row)
}
</script>

[InfernalAzazel]

ColumnSetting 这个组件的节点可以拖，文档自己就可以试。拖动后表格的列随之

确定文档有吗？看了很久没发现有

[tolking]

右边的设置图标里面才能够拖动

[InfernalAzazel]

右边的设置图标里面才能够拖动

这个图标为什么设置不了？没看懂文档设置图标的参数。
icon-class， 这个图标类表示什么？

 <template #action>
        <pro-column-setting
            v-model="tableColumns"
            icon-class="SettingOutlined" // 图标
            :allow-drag="(node) => console.log(node)"
            :allow-drop="(draggingNode, dropNode, type)=>console.log(draggingNode)"
        />
      </template>

[InfernalAzazel]

研究了一个上午，没有效果。

[tolking]

ElementPlus Tree 的老Api，现在改成 icon 了。这里文档没有更新

[InfernalAzazel]

ElementPlus Tree 的老Api，现在改成 icon 了。这里文档没有更新
这么说你这个 icon-class 是 bug 咯， 怪不得我找一个早上 icon-class 哪里被使用了 ElementPlus Tree CRUD ColumnSetting
code 反复翻看都没找到。

[InfernalAzazel]

大老有空更新一下 code，我天天都盼望着你.

[tolking]

最近忙