<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>
vue根据生成的树行table 调整排序
最新推荐文章于 2023-03-22 09:41:49 发布