JTreeTable

JTreeTable 异形树形表格组件

树形表格组件。点击加号可展开下级。

代码演示

<template>
	<j-tree-table
      ref="treeTable"
      topValue="0"
      queryKey="parentId"
      :url="url"
      :columns="columns"
      :tableProps="tableProps"
      :queryParams="queryParams"
    >
      <template v-slot:action="props">
        <!-- 可使用的参数： -->
        <!-- props.text -->
        <!-- props.record -->
        <!-- props.index -->
        <a @click="() => handleEdit(props.record)">编辑</a>/ <a @click="() => handleAddSub(props.record)">添加下级</a>/
        <a-popconfirm title="确定删除吗?" ok-text="是" cancel-text="否" @confirm="handleDelete(props.record)">
          <a style="color:red" href="#">删除</a>
        </a-popconfirm>
      </template>
    </j-tree-table>
</template>
<script>
	export default {
    data() {
      return {
        url: 'sys/area/list',
        columns: [
        	{
          	title: '地区名称',
          	dataIndex: 'name'
        	},
          {
            title: '地区等级',
            dataIndex: 'level_dictText'
          },
          {
            title: '国标编号',
            dataIndex: 'gbCode'
          },
          {
            title: '邮编',
            dataIndex: 'postCode'
          },
          {
            title: '操作',
            dataIndex: 'action',
            scopedSlots: { customRender: 'action' }
          }
      	],
        tableProps: { 
        	pagination: false
        },
      	queryParams: {
          pageSize: 9999999
        }
      }
    },
    
    methods: {
      handleEdit(record) {},
      handleAddSub(record) {},
      handleDelete(record) {}
    }
  }
</script>

api

props

属性	说明	类型	必填	默认值
rowKey	表格行 key 的取值	string		'id'
queryKey	根据什么查询	string		'parentId'
queryParams	查询条件	object
topValue	查询顶级时的值，如果顶级为0，则传0	string
columns	表格列的配置描述，参考ant design Table组件	array	✔
url	列表请求地址	string	✔
childrenUrl	子级请求地址	string
immediateRequest	是否在创建组件的时候就查询数据	boolean		true
condition	附加查询条件	string
tableProps	表格其他配置，参考ant design Table组件	object