1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
| <template>
| <a-card :bordered="false">
| <j-tree-table
| :url="url"
| topValue="0"
| queryKey="id"
| :columns="columns"
| :tableProps="tableProps">
|
| <template v-slot:action="props">
| <!-- 可使用的参数： -->
| <!-- props.text -->
| <!-- props.record -->
| <!-- props.index -->
| <a @click="()=>handleEdit(props.record)">编辑</a>
| </template>
|
| </j-tree-table>
| </a-card>
| </template>
|
| <script>
| import JTreeTable from '@/components/jeecg/JTreeTable'
|
| export default {
| name: 'JeecgTreeTable',
| components: { JTreeTable },
| data() {
| return {
| url: '/mock/api/asynTreeList',
| columns: [
| {
| title: '菜单名称',
| dataIndex: 'name'
| },
| {
| title: '组件',
| dataIndex: 'component'
| },
| {
| title: '排序',
| dataIndex: 'orderNum'
| },
| {
| title: '操作',
| dataIndex: 'action',
| scopedSlots: { customRender: 'action' }
| }
| ],
| selectedRowKeys: []
| }
| },
| computed: {
| tableProps() {
| let _this = this
| return {
| // 列表项是否可选择
| // https://vue.ant.design/components/table-cn/#rowSelection
| rowSelection: {
| selectedRowKeys: _this.selectedRowKeys,
| onChange: (selectedRowKeys) => _this.selectedRowKeys = selectedRowKeys
| }
| }
| }
| },
| methods: {
| handleEdit(record) {
| this.$info({
| width: 600,
| title: '编辑',
| content: '编辑ID：' + record.id+"；名称："+record.name,
| okText: '确定',
| maskClosable: true
| })
| }
| }
| }
| </script>
|
| <style scoped></style>
|
|
