zoukankan      html  css  js  c++  java
  • 【前端开发】基于vue的树形结构table拖拽排序教程

    安装依赖drag-tree-table(更多文档见github)

    yarn add  drag-tree-table

    html

    <dragTreeTable
              ref="table"
              :data="treeData"
              @drag="onTreeDataChange"
              onlySameLevelCanDrag
              resize
              fixed
              :isdraggable="true"
            >
              <template #selection="{row}">
                {{ row.menuName }}
              </template>
              <template #icon="{row}">
                <svg-icon :icon-class="row.icon" />
              </template>
              <template #visible="{row}">
                <div @click.stop>
                  <el-switch
                    @change="
                      val => {
                        visiableChange(val, row)
                      }
                    "
                    v-model="row.visible"
                    active-value="0"
                    inactive-value="1"
                  />
                </div>
              </template>
              <template #edit="{row}">
                <el-button
                  v-hasPermi="['system:menu:edit']"
                  type="text"
                  icon="el-icon-edit"
                  @click.stop.prevent="handleUpdate(row)"
                  >编辑</el-button
                >
                <el-button
                  v-hasPermi="['system:menu:add']"
                  type="text"
                  icon="el-icon-plus"
                  @click.stop.prevent="handleAdd(row)"
                  >新增</el-button
                >
                <el-button
                  v-hasPermi="['system:menu:remove']"
                  class="btn-delete"
                  type="text"
                  icon="el-icon-delete"
                  @click.stop.prevent="handleDelete(row)"
                  >删除</el-button
                >
              </template>
            </dragTreeTable>

    js

    import dragTreeTable from 'drag-tree-table'
    
    @Component({
      name: 'MenuManage',
      components: {
        dragTreeTable
      }
    })
    
    private tableIdArr: Array<string> = []
    private treeData: any = {
        lists: [],
        columns: [
          {
            type: 'selection',
            title: '菜单名称',
            field: 'menuName',
             130,
            align: 'left'
          },
          {
            type: 'icon',
            title: '图标',
            field: 'icon',
             100
          },
          // {
          //   title: '排序',
          //   field: 'orderNum',
          //    60
          // },
          {
            title: '权限标识',
            field: 'perms',
             130
          },
          {
            title: '组件路径',
            field: 'component',
             180
          },
          {
            type: 'visible',
            title: '可见',
            field: 'visible',
             80
          },
          {
            title: '创建时间',
            field: 'createTime',
             180
          },
          {
            type: 'edit',
            title: '操作',
            field: '',
             200,
            align: 'center'
          }
        ]
    }

    拖拽方法

      // 树形table拖拽排序
      onTreeDataChange(list: Array<object>, curObj: any) {
        this.treeData.lists = list // 拖拽后的数据
        this.tableIdArr = []
        // const idArr = this.filterIdArrFun(JSON.parse(JSON.stringify(list)), curObj.parent_id)
        const putData = {
          parentId: curObj.parent_id, // 父目录id
          ids: this.tableIdArr  // 同级id
        }
    // 得到父id和同级id数组即可请求接口
    } /** 递归获取父级id相同对象的id数组 **/ filterIdArrFun(data: any, parentId: string) { const firstFun = data.map((q: any) => { if (q.lists && q.lists.length > 0) { if (q.parentId == parentId) { this.tableIdArr.push(q.id) } q.lists = this.filterIdArrFun(JSON.parse(JSON.stringify(q.lists)), parentId) } else { if (q.parent_id === parentId) { this.tableIdArr.push(q.id) } } return q }) return this.tableIdArr }
    效果
  • 相关阅读:
    【TouchGFX】使用CubeMX创建touchgfx项目 -- 初始篇
    opencv haarcascades 下载
    更换 Anaconda 源(贼快)
    yii2 允许跨域
    sublime text 3 安装 pyv8 失败的解决办法
    win10 anaconda cuda11.1 安装 tensorlfow-gpu 环境
    nginx 403转404
    python requests 全部异常
    win10 anaconda 安装 tensorflow-gpu 及 jupyter notebook
    【PHP】自有图片服务器,图片动态裁剪缩放
  • 原文地址:https://www.cnblogs.com/xiaohuizhang/p/14931211.html
Copyright © 2011-2022 走看看