vue根据生成的树行table 调整排序

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

<script>
import dragTreeTable from 'drag-tree-table'

export default {
  name: "treeTable",
  data() {
    return {
      treeData: {
        lists: [
          // {
          //   "id": "40",
          //   "parent_id": "0",
          //   "order": "0",
          //   "name": "动物类",
          //   "open": true,
          //   "lists": []
          // }, {
          //   "id": "5",
          //   "parent_id": "0",
          //   "order": "1",
          //   "name": "昆虫类",
          //   "open": true,
          //   "lists": [
          //     {
          //       "id": "12",
          //       "parent_id": "5",
          //       "open": true,
          //       "order": '0',
          //       "name": "蚂蚁",
          //       "lists": []
          //     }
          //   ]
          // },
          // {
          //   "id": '19',
          //   "parent_id": '0',
          //   "order": '2',
          //   "name": "植物类",
          //   "open": true,
          //   "lists": []
          // }
        ],
        columns: [
          {
            type: 'selection',
            title: '名称',
            field: 'name',
            width: 200,
            align: 'center',
            formatter: (item) => {
              return '<a>' + item.name + '</a>'
            }
          },
          {
            title: '操作',
            type: 'action',
            width: 350,
            align: 'center',
            actions: [
              {
                text: '查看角色',
                onclick: this.onDetail,
                formatter: (item) => {
                  return '<i style="padding: 0 5px">查看角色</i>'
                }
              },
              {
                text: '编辑',
                onclick: this.onEdit,
                formatter: (item) => {
                  return '<i>编辑</i>'
                }
              }
            ]
          },
        ]
      }
    }
  },

  components: {
    dragTreeTable
  },
  created() {
    this.$http.get('https://www.fastmock.site/mock/4e2c5b42dd4ff2e538fde119a1ed4a90/mytest/lists').then(res => {
      console.log(res.data)
      this.treeData.lists = res.data;
    }).catch(error => {
      console.log(error)
    })
  },
  methods: {
    onDetail() {
      console.log(1212)
    },
    onEdit() {
      console.log(99999999999)
    },
    onTreeDataChange(lists) {
      console.log(lists)
      this.treeData.lists = lists
    }
  }
}
</script>

<style scoped>

</style>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值