# JAsyncTreeList異步樹列表組件使用說明 ## 引入組件 ```js import JTreeTable from '@/components/jeecg/JTreeTable' export default { components: { JTreeTable } } ``` ## 所需參數 | 參數 | 類型 | 必填 | 說明 | |-------------|--------|--------|--------------------------------------------------------------| | rowKey | String | 非必填 | 表格行 key 的取值，默認為"id" | | columns | Array | 必填 | 表格列的配置描述，具體見Antd官方文檔 | | url | String | 必填 | 數據查詢url | | childrenUrl | String | 非必填 | 查詢子級時的url，若不填則使用url參數查詢子級 | | queryKey | String | 非必填 | 根據某個字段查詢，如果傳遞 id 就根據 id 查詢，默認為parentId | | queryParams | Object | 非必填 | 查詢參數，當查詢參數改變的時候會自動重新查詢，默認為{} | | topValue | String | 非必填 | 查詢頂級時的值，如果頂級為0，則傳0，默認為null | | tableProps | Object | 非必填 | 自定義給內部table綁定的props | ## 代碼示例 ```html <template> <a-card :bordered="false"> <j-tree-table :url="url" :columns="columns" :tableProps="tableProps"/> </a-card> </template> <script> import JTreeTable from '@/components/jeecg/JTreeTable' export default { name: 'AsyncTreeTable', components: { JTreeTable }, data() { return { url: '/api/asynTreeList', columns: [ { title: '菜單名稱', dataIndex: 'name' }, { title: '組件', dataIndex: 'component' }, { title: '排序', dataIndex: 'orderNum' } ], selectedRowKeys: [] } }, computed: { tableProps() { let _this = this return { // 列表項是否可選擇 // 配置項見：https://vue.ant.design/components/table-cn/#rowSelection rowSelection: { selectedRowKeys: _this.selectedRowKeys, onChange: (selectedRowKeys) => _this.selectedRowKeys = selectedRowKeys } } } } } </script> ```