vxe实现树形表格的两种方式，可分页

官网V3版本
安装和引入即可使用
1.最基本的vxe使用

<template>
  <div>
    <vxe-table
      border
      row-id="id"
      :data="tableData"
      :tree-config="{ children: 'children', expandAll: true }"
    >
      <vxe-table-column
        type="seq"
        width="180"
        title="序号"
        tree-node
      ></vxe-table-column>
      <vxe-table-column field="name" title="导航名称"></vxe-table-column>
      <vxe-table-column field="url" title="URL"></vxe-table-column>
    </vxe-table>
  </div>
</template>
<script>
export default {
  data() {
    return {
      tableData: [
        {
          seq: 1,
          name: "系统管理",
          url: "",
          children: [
            {
              seq: 10,
              name: "用户管理",
              url: "sys/user"
            },
            {
              seq: 11,
              name: "权限管理",
              url: "sys/right"
            },
            {
              seq: 12,
              name: "角色管理",
              url: "sys/role"
            }
          ]
        },
        {
          seq: 2,
          name: "报表管理",
          url: "report"
        }
      ]
    };
  }
};
</script>

2.项目中常规使用

<template>
    <div class="list">
    <vxe-table
          border="full"
          resizable
          ref="xTable"
          row-id="id"
          :checkbox-config="{reserve: true}"
          :row-config="{isCurrent: true, isHover: true}"
          :tree-config="{expandAll: true, 
                        transform: true, 
                        rowField: 'id', 
                        parentField: 'parentId', 
                       
                        reserve: true, 
                        indent: 40,
                        }"
          :data="tableData"
          @checkbox-all='checkboxAll(checked, row, rowIndex, $rowIndex, column, columnIndex, $columnIndex, $event)'
          @toggle-tree-expand="toggleExpandChangeEvent"
          >
          <vxe-column type="checkbox" width="60"></vxe-column>
          <vxe-column field="seq" title="#" width="60">
              <template #default="{ row }">
                  <span v-if='row.seq < 0'> {{(row.seq/(-100)).toFixed(2)}}</span>
                  <span v-else> {{(row.seq/100)}}</span>
              </template>
          </vxe-column>
          <vxe-column field="name" title="部門名"  tree-node>
              <template #default="{ row }">
                    <span v-if='row.badge !== null && row.badge !== "" && row.badge !== undefined'>
                        <Badge :text="row.badge" type="primary" class="demo-badge">
                                &nbsp; &nbsp; &nbsp; 
                        </Badge>
                                &nbsp; &nbsp; &nbsp; 
                    </span>
                    <span>{{row.name}}</span>
            </template>
          </vxe-column>
          <vxe-column field="order" title="排序值"></vxe-column>
          <vxe-column field="childrenTotal" title="total"></vxe-column>
          <vxe-column title="操作" :width="500"  fixed="right">
            <template #default="{row}">
                    <template>
                        <Button size="small" type="text" style="color:#5cadff" @click="">
                            <font-awesome-icon icon="fa-solid fa-circle-info" />DRI
                        </Button>
                        
                        <Button type="text" size="small" @click="editEvent(row)">
                            <font-awesome-icon icon="fa-solid fa-pen-to-square" />编辑
                        </Button>

                        <Button size="small" type="text" style="color:#ff5c33" @click="removeEvent(row)">
                            <font-awesome-icon icon="fa-solid fa-download" />删除
                        </Button>

                    </template>
                </template>
          </vxe-column>
        </vxe-table>
			
			<!-- 分页 设计-->
			<p>
          <vxe-pager
          background
          align= 'right'
          :loading="loading"
          :current-page="page.currentPage"
          :page-size="page.pageSize"
          :total="page.totalResult"
          :layouts="['PrevPage', 'JumpNumber', 'NextPage', 'FullJump', 'Sizes', 'Total']"
          @page-change="handlePageChange">
        </vxe-pager>
        </p>
  </div>
</template>

<script>
	export default {
      data () {
      	tableData: [],
      	page: {
            currentPage: 1,
            pageSize: 10,
            totalResult: 0
          },
          parameter: {
            start:  0,
            length: 10,
            queryParameter: ''
          }
      },
		created () {
          this.findList(this.parameter)
      },
     methods: {
     	 findList (param) {
            this.parameter.start = (this.page.currentPage-1)*(this.page.pageSize)
            this.parameter.length = this.page.pageSize

            if(param !== undefined && param !== null && typeof param == 'string'){
                this.parameter.queryParameter = param
            }
            
            return new Promise(resolve => {
                _axios({
                    method: 'post',
                    url: '/dept/list/page',
                    data: qs.stringify(this.parameter)
                }).then(result=>{
                    if(result.data.code == 200){
                        this.tableData1 = result.data.data
                        this.page.totalResult = result.data.count

                    }
                   
                })
                this.loading = false
                resolve()
            })
            
        },
}

controller接收
用的时map接收，说以不是使用JSON.stringify()，而是qs.stringify()传参

@PostMapping("/list/page")
    public Page<List<FADeptResponseDTO>> ListForPage(@RequestParam Map<String, Object> map) {}

在mapper层
使用层次查询

<![CDATA[ 
        SELECT *      
        FROM (
            SELECT
        ]]>
        	ROWNUM RN,
            <include refid="baseFields" />
        <![CDATA[
            FROM FA_DEPT FD
		]]>
            <include refid="queryCondition"/>
            CONNECT BY PRIOR FD.ID_ = FD.PARENT_ID
            START WITH FD.PARENT_ID IS NULL
            <if test="qo != null and qo.orderBySql != null and qo.orderBySql != '' ">
                ORDER SIBLINGS BY ${qo.orderBySql}
            </if>
        <![CDATA[
        ) P
        WHERE P.RN > #{start, jdbcType=INTEGER}
          AND P.RN <= #{end, jdbcType=INTEGER}
        ]]>