Template5.vue

<template>
  <a-card :bordered="false">

    <a-row :gutter="8">
      <a-col :span="6">
        <!-- 加上 show-line 属性后，展开收起图标自动变成 +- 样式 -->
        <a-tree
          class="template-5-tree"
          :tree-data="treeData"
          show-icon
          show-line
          :expandedKeys="treeExpandedKeys"
          :selectedKeys="[pagination.current]"
          @expand="handleTreeExpand"
          @select="handleTreeSelect"
        >
          <!-- 自定义子节点图标 -->
          <a-icon slot="myIcon" type="unordered-list" style="color:#0c8fcf;"/>
        </a-tree>
      </a-col>
      <a-col :span="18">
        <j-vxe-table
          row-number
          row-selection
          :height="750"
          :loading="loading"
          :columns="columns"
          :dataSource="dataSource"
          :pagination="pagination"
          @pageChange="handleTablePageChange"
        />
      </a-col>
    </a-row>


  </a-card>
</template>

<script>
  import { getAction } from '@api/manage'
  import { JVXETypes } from '@/components/jeecg/JVxeTable'

  // 【多种布局模板】左侧为树，右侧为行编辑
  export default {
    name: 'Template5',
    data() {
      return {
        // 是否正在加载
        loading: false,
        // 分页器参数
        pagination: {
          // 当前页码
          current: 1,
          // 每页的条数
          pageSize: 50,
          // 可切换的条数
          pageSizeOptions: ['50'],
          // 数据总数（目前并不知道真实的总数，所以先填写0，在后台查出来后再赋值）
          total: 0,
        },
        // 选择的行
        selectedRows: [],
        // 数据源，控制表格的数据
        dataSource: [],
        // 列配置，控制表格显示的列
        columns: [
          {key: 'num', title: '序号', width: '80px'},
          {
            // 字段key，跟后台数据的字段名匹配
            key: 'ship_name',
            // 列的标题
            title: '船名',
            // 列的宽度
            width: '180px',
            // 如果加上了该属性，就代表当前单元格是可编辑的，type就是表单的类型，input就是简单的输入框
            type: JVXETypes.input
          },
          {key: 'call', title: '呼叫', width: '80px', type: JVXETypes.input},
          {key: 'len', title: '长', width: '80px', type: JVXETypes.input},
          {key: 'ton', title: '吨', width: '120px', type: JVXETypes.input},
          {key: 'payer', title: '付款方', width: '120px', type: JVXETypes.input},
          {key: 'count', title: '数', width: '40px'},
          {
            key: 'company',
            title: '公司',
            // 最小宽度，与宽度不同的是，这个不是固定的宽度，如果表格有多余的空间，会平均分配给设置了 minWidth 的列
            // 如果要做占满表格的列可以这么写
            minWidth: '180px',
            type: JVXETypes.input
          },
          {key: 'trend', title: '动向', width: '120px', type: JVXETypes.input},
        ],
        // 树的数据，这里模拟分页固定数据，实际情况应该是后台查出来的数据
        treeData: [
          // 第1级数据
          {
            title: '1-10页',
            key: '1-10',
            // 第2级数据
            children: [
              {title: '第 1 页', key: 1, slots: {icon: 'myIcon'}},
              {title: '第 2 页', key: 2, slots: {icon: 'myIcon'}},
              {
                title: '第 3 页',
                key: 3,
                slots: {icon: 'myIcon'},
                // 第3级数据
                children: [
                  {title: '第 333 页', key: 333, slots: {icon: 'myIcon'}},
                  {title: '第 444 页', key: 444, slots: {icon: 'myIcon'}},
                  {title: '第 555 页', key: 555, slots: {icon: 'myIcon'}},
                  // 第4第5级以此类推，加上 children 属性即可
                ],
              },
              {title: '第 4 页', key: 4, slots: {icon: 'myIcon'}},
              {title: '第 5 页', key: 5, slots: {icon: 'myIcon'}},
              {title: '第 6 页', key: 6, slots: {icon: 'myIcon'}},
              {title: '第 7 页', key: 7, slots: {icon: 'myIcon'}},
              {title: '第 8 页', key: 8, slots: {icon: 'myIcon'}},
              {title: '第 9 页', key: 9, slots: {icon: 'myIcon'}},
              {title: '第 10 页', key: 10, slots: {icon: 'myIcon'}},
            ],
            slots: {icon: 'myIcon'},
          },
          {
            title: '11-20页',
            key: '11-20',
            children: [
              {title: '第 11 页', key: 11, slots: {icon: 'myIcon'}},
              {title: '第 12 页', key: 12, slots: {icon: 'myIcon'}},
              {title: '第 13 页', key: 13, slots: {icon: 'myIcon'}},
              {title: '第 14 页', key: 14, slots: {icon: 'myIcon'}},
              {title: '第 15 页', key: 15, slots: {icon: 'myIcon'}},
              {title: '第 16 页', key: 16, slots: {icon: 'myIcon'}},
              {title: '第 17 页', key: 17, slots: {icon: 'myIcon'}},
              {title: '第 18 页', key: 18, slots: {icon: 'myIcon'}},
              {title: '第 19 页', key: 19, slots: {icon: 'myIcon'}},
              {title: '第 20 页', key: 20, slots: {icon: 'myIcon'}},
            ],
            slots: {icon: 'myIcon'},
          },
        ],
        // 树展开的列，默认 1-10
        treeExpandedKeys: ['1-10'],
        // 查询url地址
        url: {
          getData: '/mock/vxe/getData',
        },
      }
    },
    created() {
      this.loadData()
    },
    methods: {

      // 加载行编辑的数据
      loadData() {
        // 封装查询条件
        let formData = {
          pageNo: this.pagination.current,
          pageSize: this.pagination.pageSize
        }
        // 调用查询数据接口
        this.loading = true
        getAction(this.url.getData, formData).then(res => {
          if (res.success) {
            // 后台查询回来的 total，数据总数量
            this.pagination.total = res.result.total
            // 将查询的数据赋值给 dataSource
            this.dataSource = res.result.records
            // 重置选择
            this.selectedRows = []
          } else {
            this.$error({title: '主表查询失败', content: res.message})
          }
        }).finally(() => {
          // 这里是无论成功或失败都会执行的方法，在这里关闭loading
          this.loading = false
        })
      },

      handleTablePageChange(event) {
        // 重新赋值
        this.pagination.current = event.current
        this.pagination.pageSize = event.pageSize
        // 查询数据
        this.loadData()
        // 判断树展开的key
        if (event.current <= 10) {
          this.treeExpandedKeys = ['1-10']
        } else {
          this.treeExpandedKeys = ['11-20']
        }
      },

      // 树被选择触发的事件
      handleTreeSelect(selectedKeys) {
        let key = selectedKeys[0]
        if (typeof key === 'string') {
          // 控制树展开为当前选择的列
          this.treeExpandedKeys = selectedKeys
        } else {
          this.pagination.current = key
          this.loadData()
        }
      },

      // 树被选择触发的事件
      handleTreeExpand(expandedKeys) {
        this.treeExpandedKeys = expandedKeys
      },

    },
  }
</script>

<style lang="less">
  /** 隐藏文件小图标 */
  .template-5-tree.ant-tree {
    li span.ant-tree-switcher.ant-tree-switcher-noop {
      display: none;
    }
  }
</style>