CostumingPlatform/ant-design-vue-jeecg/src/views/jeecg/JeecgTreeTable.vue

<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>