vue-antd table树形结构默认展开第一个节点和第二个节点

需要配合a-table组件的一个属性一个方法,如下

:expandedRowKeys="table.expandedRowKeys"  //属性
@expand="expand"  //方法

/**
* @Author:一个帅小伙
* @Date: 2019/8/19
* @Version: 1.0
* @Last Modified by: 一个帅小伙
* @Last Modified time: 2019/8/22
**/
<comment>
  # 组件注释
  项目施工区段
</comment>
<template>
  <div id="ProjectConstructionSection" class="page-box">
    <div class="page-title">
      <Title></Title>
    </div>
    <div class="page-content">
      <div class="pannel">
        <div class="pannel-title">
          
    
        </div>
        <div class="pannel-content">
          <div class="table-box">
            <div class="table-table">
              <a-skeleton active :loading="table.loading" :paragraph="{rows: 15}">
                <a-table

                  rowKey="id"
                  :expandedRowKeys="table.expandedRowKeys"
                  @expand="expand"
                >
               
                </a-table>
              </a-skeleton>
            </div>
            <div class="table-pagination"></div>
          </div>
        </div>
      </div>
    </div>
  
  </div>
</template>

<script>

export default {
  name: "ProjectConstructionSection",
  components: {
  
  },
  props: {},
  data() {
    return {
      Util,
      table: {
        loading: false,
        height: 200,
        columns: [],
        searchData: [],
        data: [],
        expandedRowKeys: [],
        selectedRowKeys: [],
        plainOptions: [
          { label: "施工区段名称", value: 0 },
          { label: "添加时间", value: 1 },
          { label: "添加人", value: 2 },
          { label: "最后编辑时间", value: 3 },
          { label: "最后编辑人", value: 4 }
        ],
        operValue: [0, 1, 2, 3, 4],
        initColumns: {
          0: {
            title: "施工区段名称",
            dataIndex: "name",
            width: 450,
            scopedSlots: { customRender: "name" }
          },
          1: {
            title: "添加时间",
            className: "column-time",
            width: 150,
            dataIndex: "time"
          },
          2: {
            title: "添加人",
            className: "column-nature",
            width: 150,
            dataIndex: "nature",
            scopedSlots: { customRender: "nature" }
          },
          3: {
            title: "最后编辑时间",
            className: "column-createTime",
            width: 150,
            dataIndex: "createTime",
            scopedSlots: { customRender: "createTime" }
          },
          4: {
            title: "最后编辑人",
            className: "column-status",
            width: 150,
            dataIndex: "status",
            scopedSlots: { customRender: "status" }
          }
        }
      },
      pagination: {
        pageNo: 1,
        pageSize: 10,
        totalCount: 0
      }
    };
  },
  computed: {
    
  },
  created() {
 
  },
  mounted() {
    
  },
  watch: {},
  methods: {
    
    expand(e, item) {
      e = !e;
      if (e) {
        this.table.expandedRowKeys.splice(
          this.table.expandedRowKeys.findIndex(i => i == item.id),
          1
        );
      } else {
        this.table.expandedRowKeys.push(item.id);
      }
    },
/** 搜索列表*/
    searchList(isInit) {
      
    
      let response = {
        data: []
      };
      response.data = [
        {
          pid: "0",
          code: "ZZ001",
          name: "组织管理",
          children: [
            {
              pid: "ff4f7c04c55f4e23a125a840344fee24",
              code: "ZZ001-001",
              name: "组织",
              type: "group",
              orderNumber: 1,
              isPlatform: 0,
              appType: 1,
              isThird: 0,
              id: "cac6e1367c4a4a7c9cf2222a689ce310",
              createUser: "123",
              updateUser: "123",
              updateTime: "1568798837140",
              createTime: "1568798837140"
            },
            {
              pid: "ff4f7c04c55f4e23a125a840344fee24",
              code: "ZZ001-002",
              name: "岗位",
              type: "group",
              orderNumber: 2,
              isPlatform: 0,
              appType: 1,
              isThird: 0,
              id: "3eb2f13442b7435eb1799277f6ac7a99",
              createUser: "123",
              updateUser: "123",
              updateTime: "1568798951747",
              createTime: "1568798951747"
            },
            {
              pid: "ff4f7c04c55f4e23a125a840344fee24",
              code: "ZZ001-003",
              name: "项目部",
              type: "group",
              orderNumber: 3,
              isPlatform: 0,
              appType: 1,
              isThird: 0,
              id: "411bd3869ad949a5abd3ae4507446ed9",
              createUser: "123",
              updateUser: "123",
              updateTime: "1568799052030",
              createTime: "1568799052030"
            }
          ],
          type: "group",
          orderNumber: 1,
          isPlatform: 0,
          appType: 1,
          isThird: 0,
          id: "ff4f7c04c55f4e23a125a840344fee24",
          createUser: "123",
          updateUser: "123",
          updateTime: "1568798531726",
          createTime: "1568798531726"
        },
        {
          pid: "0",
          code: "CJ001",
          name: "参建单位管理",
          children: [
            {
              pid: "3ea1c09bdc3342008755ba41afe28a94",
              code: "CJ001-001",
              name: "参建单位",
              type: "group",
              orderNumber: 1,
              isPlatform: 0,
              appType: 1,
              isThird: 0,
              id: "ec729db406e746e69420d4fd449e3abf",
              createUser: "123",
              updateUser: "123",
              updateTime: "1568799115466",
              createTime: "1568799115466"
            }
          ],
          type: "group",
          orderNumber: 2,
          isPlatform: 0,
          appType: 1,
          isThird: 0,
          id: "3ea1c09bdc3342008755ba41afe28a94",
          createUser: "123",
          updateUser: "123",
          updateTime: "1568798605683",
          createTime: "1568798605683"
        },
        {
          pid: "0",
          code: "YH001",
          name: "用户管理",
          children: [
            {
              pid: "05544c6012854fd78b1825f1aab8c57e",
              code: "YH001-001",
              name: "用户",
              type: "group",
              orderNumber: 1,
              isPlatform: 0,
              appType: 1,
              isThird: 0,
              id: "6dcd14f8e23e4d7abbb9066f52cd43ea",
              createUser: "123",
              updateUser: "123",
              updateTime: "1568800009616",
              createTime: "1568799986768"
            }
          ],
          type: "group",
          orderNumber: 3,
          isPlatform: 0,
          appType: 1,
          isThird: 0,
          id: "05544c6012854fd78b1825f1aab8c57e",
          createUser: "123",
          updateUser: "123",
          updateTime: "1568798624111",
          createTime: "1568798624111"
        },
        {
          pid: "0",
          code: "QX001",
          name: "权限管理",
          children: [
            {
              pid: "479b3005591a464eba8ed5d95059d7d3",
              code: "QX001-001",
              name: "应用授权",
              type: "group",
              orderNumber: 1,
              isPlatform: 0,
              appType: 1,
              isThird: 0,
              id: "b36ccf28494c421a86165fa5de1198d3",
              createUser: "123",
              updateUser: "123",
              updateTime: "1568800327867",
              createTime: "1568800327867"
            }
          ],
          type: "group",
          orderNumber: 4,
          isPlatform: 0,
          appType: 1,
          isThird: 0,
          id: "479b3005591a464eba8ed5d95059d7d3",
          createUser: "123",
          updateUser: "123",
          updateTime: "1568798639096",
          createTime: "1568798639096"
        },
        {
          pid: "0",
          code: "JC001",
          name: "集成管理",
          children: [
            {
              pid: "d6792a336b68433e8121c3fd5439d1e0",
              code: "JC001-001",
              name: "应用集成",
              type: "group",
              orderNumber: 1,
              isPlatform: 0,
              appType: 1,
              isThird: 0,
              id: "f518321d2b144b9cb411b68ee10a302d",
              createUser: "123",
              updateUser: "123",
              updateTime: "1568800194096",
              createTime: "1568800194096"
            }
          ],
          type: "group",
          orderNumber: 5,
          isPlatform: 0,
          appType: 1,
          isThird: 0,
          id: "d6792a336b68433e8121c3fd5439d1e0",
          createUser: "123",
          updateUser: "123",
          updateTime: "1568798665251",
          createTime: "1568798665251"
        },
        {
          pid: "0",
          code: "YY001",
          name: "运营管理",
          children: [
            {
              pid: "207bb2fe97534725914bbcdad8a10831",
              code: "YY001-001",
              name: "平台租户",
              type: "group",
              orderNumber: 1,
              isPlatform: 0,
              appType: 1,
              isThird: 0,
              id: "fd25341f9a2a430e9c741a0f53ccaa44",
              createUser: "123",
              updateUser: "123",
              updateTime: "1568800499130",
              createTime: "1568800499130"
            },
            {
              pid: "207bb2fe97534725914bbcdad8a10831",
              code: "YY001-002",
              name: "产品秘钥",
              type: "group",
              orderNumber: 2,
              isPlatform: 0,
              appType: 1,
              isThird: 0,
              id: "affc9213484d4b559a73608e8cba390a",
              createUser: "123",
              updateUser: "123",
              updateTime: "1568800767171",
              createTime: "1568800767171"
            }
          ],
          type: "group",
          orderNumber: 6,
          isPlatform: 0,
          appType: 1,
          isThird: 0,
          id: "207bb2fe97534725914bbcdad8a10831",
          createUser: "123",
          updateUser: "123",
          updateTime: "1568798682074",
          createTime: "1568798682074"
        },
        {
          pid: "0",
          code: "YW001",
          name: "业务共享管理",
          children: [
            {
              pid: "611049b7f68f4c1398ca08580be00cb9",
              code: "YW001-001",
              name: "基础业务配置",
              type: "group",
              orderNumber: 1,
              isPlatform: 0,
              appType: 1,
              isThird: 0,
              id: "c7978f71f3604d51859097ad72d27a16",
              createUser: "123",
              updateUser: "123",
              updateTime: "1568800880679",
              createTime: "1568800880679"
            }
          ],
          type: "group",
          orderNumber: 7,
          isPlatform: 0,
          appType: 1,
          isThird: 0,
          id: "611049b7f68f4c1398ca08580be00cb9",
          createUser: "123",
          updateUser: "123",
          updateTime: "1568798706442",
          createTime: "1568798706442"
        },
        {
          pid: "0",
          code: "GZ001",
          name: "工作台",
          type: "group",
          orderNumber: 8,
          isPlatform: 0,
          appType: 1,
          isThird: 0,
          id: "34a0f7a32f9f4a608ab24929f7265c89",
          createUser: "123",
          updateUser: "123",
          updateTime: "1568798748882",
          createTime: "1568798748882"
        },
        {
          pid: "0",
          code: "AQ001",
          name: "安全管理系统",
          children: [
            {
              pid: "e2cdf81beeeb4b3baab0954f2df1d4f1",
              code: "AQ001-001",
              name: "安全巡检",
              type: "group",
              orderNumber: 1,
              isPlatform: 0,
              appType: 1,
              isThird: 0,
              id: "ed48cff8239845a8a7dfb8f68d2fd1ca",
              createUser: "123",
              updateUser: "123",
              updateTime: "1568893734210",
              createTime: "1568893734210"
            }
          ],
          type: "group",
          orderNumber: 9,
          isPlatform: 0,
          appType: 1,
          isThird: 0,
          id: "e2cdf81beeeb4b3baab0954f2df1d4f1",
          createUser: "123",
          updateUser: "123",
          updateTime: "1568893700342",
          createTime: "1568893700342"
        },
        {
          pid: "0",
          code: "1234",
          name: "测试项目2-8",
          type: "group",
          orderNumber: 10,
          isPlatform: 0,
          appType: 0,
          isThird: 0,
          id: "29f1c8e9ba734824a910efc08f9b1ce9",
          createUser: "123",
          updateUser: "123",
          updateTime: "1571390905821",
          createTime: "1571390905821"
        }
      ];
      this.table.loading = false;
      if (response.data) {
        this.table.data = response.data.length
          ? Util.dealData(response.data)
          : [];
        this.table.searchData = this.table.data;
        console.log(this.table.searchData);
        if (isInit) {
          //展开两个层级
          this.table.expandedRowKeys = Util.getIds(this.table.searchData);
        }
      } else {
        this.table.data = [];
        this.table.searchData = [];
        this.table.expandedRowKeys = [];
      }
      
    },

  },
  destroyed() {}
};
</script>

<style lang="scss">
#ProjectConstructionSection {
  .table-input {
    position: relative;
    .ant-input {
      position: absolute;
      top: 50%;
      left: 50%;
      min-width: 300px;
      max-width: 350px;
      margin-top: -15px;
      //transform: translate(-50%,-50%)
    }
  }
  .enableEditCol {
    cursor: pointer;
  }
}
</style>

获取最外两层ID集合 的方法

 /**
   * 获取最外两层ID集合
   * @param data
   * @returns {Array}
   */
 let  Util = {}
  Util.getIds = function (data) {
    let arr = []
    data.length && data.forEach((item) => {
      if (item.children && item.children.length) {
        arr.push(item.id)
        item.children.forEach((item) => {
          arr.push(item.id)
        })
      }
    })
    return arr
  }
发布了180 篇原创文章 · 获赞 23 · 访问量 8万+

猜你喜欢

转载自blog.csdn.net/qq_37899792/article/details/102703836