下面是组件支持的所有特性相关的DEMO,并对每个DEMO做代码上的解释

文档查看

demo汇总

显示边框 DEMO


组件增加border属性

<dragTreeTable
  :data="treeData" 
  :onDrag="onTreeDataChange"
  border>
</dragTreeTable>

删除行 DEMO | 源码查看


组件内部增加DelById方法,通过ID删除对应行,返回删除后的全量数据

<dragTreeTable
  :data="treeData" 
  :onDrag="onTreeDataChange"
  ref="table">
</dragTreeTable>
// columns
{
  text: "删除",
  onclick: this.onDel,
  formatter: item => {
    return "<i>删除</i>";
  }
}
// methods
onDel(item) {
  //本地删除数据,返回删除后的全量数据
  const updatedLists = this.$refs.table.DelById(item.id)
  this.treeData.lists = updatedLists;
}

固定表头 DEMO


组件增加fixed属性,默认高度是400

<dragTreeTable
  :data="treeData" 
  :onDrag="onTreeDataChange"
  fixed>
</dragTreeTable>

单元格宽度调整 DEMO


组件增加resize属性,默认自动展示边框,鼠标放置表头单元格右侧显示拖拽图标

<dragTreeTable
  :data="treeData" 
  :onDrag="onTreeDataChange"
  resize>
</dragTreeTable>

弹性布局 DEMO


columns设置flex即可,如下,最后一列设置flex:1,前面两列设置固定宽度,最后一列会弹性调整宽度,撑满剩余宽度

var columns = [
      {
        type: "selection",
        title: "菜单名称",
        field: "name",
        width: 200,
        align: "left"
      },
      {
        title: "ID",
        field: "id",
        width: 100,
        align: "center"
      },
      {
        title: "链接",
        field: "uri",
        align: "center",
        flex: 1
      }
    ];

自定义单元格展示内容 DEMO


columns设置formatter,,formatter接受一个函数,返回Html字符串,不支持Vue组件嵌入 如果需要注册click事件,添加onclick参数

var columns = [
      {
        type: "selection",
        title: "菜单名称",
        field: "name",
        width: 200,
        align: "left",
        titleAlign: "left"
      },
      {
        title: "操作",
        type: "action",
        width: 150,
        align: "center",
        actions: [
          {
            text: "查看角色",
            onclick: (row)=> {
              alert(row.name)
            },
            formatter: item => {
              return "<i>查看角色 </i>";
            }
          },
          {
            text: "编辑",
            onclick: (row)=> {
              alert(row.id)
            },
            formatter: item => {
              return "<i>编辑</i>";
            }
          }
        ]
      }
    ];

禁止拖拽 DEMO


如果不希望用户在拖拽,则可以增加组件参数:isdraggable="false"

    <dragTreeTable
    :data="treeData"
    :onDrag="onTreeDataChange"
    :isdraggable="false">
  </dragTreeTable>

禁止拖拽改变层级,只允许调整顺序 DEMO


如果不希望用户在拖拽时改变层级结构,则可以增加组件参数onlySameLevelCanDrag

<dragTreeTable
  :data="treeData" 
  :onDrag="onTreeDataChange" 
  onlySameLevelCanDrag>
</dragTreeTable>

checkbox多选框 DEMO


表格的某一列显示checkbox 设置column中type参数为checkbox即可 如果需要默认选中,数据中增加checked=true 如果想让某一行不显示checkbox,数据中增加isShowCheckbox=false

var columns = [
      {
        type: "checkbox",
        width: 100,
        align: "center",
        isContainChildren: true
      },
      {
        type: "selection",
        title: "菜单名称",
        field: "name",
        width: 200,
        align: "left",
        titleAlign: "left",
        formatter: item => {
          return "<span>" + item.name + "</span>";
        }
      },
      {
        title: "链接",
        field: "uri",
        width: 200,
        align: "center"
      },
      {
        title: "父ID",
        field: "parent_id",
        width: 150,
        align: "center"
      },
    ];
    

自定义字段 DEMO


如果后端返回的数据跟vue-drag-tree-table组件的默认字段不一致,可以通过custom_field设置字段 举例。后端返回的数据,子节点字段是children,非lists,只需要如下设置

<dragTreeTable :data="treeData" :onDrag="onTreeDataChange"></dragTreeTable>

treeData: {
  columns: [],
  lists: [],
  custom_field: {
    lists: 'children'
  }
}

同理,id、parent_id、order、都可以通过此方式设置

单元格对齐 DEMO


表头和表格内容可以分别控制单元格的对齐方式,表头对齐设置titleAlign,内容对齐设置align 总共3个值left、center、right columns设置如下

 {
  title: "ID",
  field: "id",
  width: 100,
  align: "center",
  titleAlign: "right"
}

拖拽行高亮提示 DEMO


组件增加hightRowChange参数即可,拖拽完成时,被拖拽的行会闪烁一下

    <dragTreeTable
      :data="treeData" 
      :onDrag="onTreeDataChange"
      hightRowChange>
    </dragTreeTable>

监听表格拖拽事件 DEMO


onDrag会返回四个参数,第一个是拖拽后新的数据,from是当前拖拽的行,to是目标行,where是拖拽的行为,top、bottom、center

<template>
    <dragTreeTable
      :data="treeData" 
      :onDrag="onTreeDataChange">
    </dragTreeTable>
</template>

//methods
onTreeDataChange(lists, from, to, where) {
      const pos = {
        top: '上面',
        bottom: '下面',
        center: '里面'
      }
      alert(from.name + '  拖拽到  ' + to.name + '的' + pos[where])
      console.log(lists);
      this.treeData.lists = lists;
    }
  }

监听checkbox勾选 DEMO


onDrag会返回四个参数,第一个是拖拽后新的数据,from是当前拖拽的行,to是目标行,where是拖拽的行为,top、bottom、center


// columns中type设置为checkbox,然后增加onChange,每次触发勾选后,onChange会返回一个数组,包含所有勾选的行
{
  type: "checkbox",
  width: 100,
  align: "center",
  onChange: (item)=>{
    console.log(item)
    alert('您选中了'+ item.length + '条数据');
  }
},

全部折叠 DEMO


组件提供了两个用于全部折叠和打开的方法,ZipAll、OpenAll,使用方法如下

this.$refs.table.ZipAll();

动态控制是否可以拖拽 DEMO


如果用户动态控制某些行不允许拖拽,或者被拖拽进入,则可以增加组件参数beforeDragOver,可以动态控制哪些行可以拖拽,哪些行可以拖拽进入…

<dragTreeTable
      :data="treeData"
      :onDrag="onTreeDataChange"
      :beforeDragOver="beforeDragOver">
    </dragTreeTable>

    // method
    // from当前拖拽行,to拖拽目标行,where拖拽的方向(bottom,center,top)
    beforeDragOver(from, to, where) {
      if (from.name == '客户') return false
      if (to.name == '联系人') return false
      return true
    }

--------------

原创文章出自 木法传,如转载请注明本文链接:https://www.mofazhuan.com/31.html

--------------