vue Ant Design a variety of table components

First, nested tables

 

 

 <a-table :columns="columns" :dataSource="operation1" :slot-scope="record" class="components-table-demo-nested" @expand="child"  rowKey="id" @expandedRowsChange="expandedRowsChange" :expandedRowKeys="expandedRowKeys"> 
    <a slot="operation" slot-scope="text,record"  @click="del(record)">删除</a>
    <a-table
      slot="expandedRowRender"
      :slot-scope="record"
      :columns="innerColumns"
      :dataSource="operation2"
      :pagination="false"
    >
     <span slot="status" slot-scope="text">
        {{ text | statusFilter }}
      </span>
      <span slot="operation" class="table-operation"  slot-scope="text, record">
         <a  @click="delDevice(record)">删除</a>
      </span>
    </a-table>
  </a-table>

The first layer loop:

 

Click the + trigger child event, obtaining background data, two-story cycle show

Child (Expanded, the Record) { 
        this.expandedRowKeys = [] // Reset expand the node, expand the current node only clicked (internal call data template, you can not do while several inner table data directly in the page cache) 
      IF (Expanded ) { 
        this.expandedRowKeys = [record.id] 
        this.getDictItem () // Get the internal data table 
      } 
      the console.log (record.id) 
      the this $ http.post (. 'HTTP: // XXXX / Device / Child', { 
               'ID': record.id 
           }.) the then (Result => {   
             the console.log (Result) 
             this.operation2 = Result 
        }) 
     },

 getDictItem (obj) {

      let searchparam = { id: this.expandedRowKeys[0] }

      if (obj) {// The conditions in addition to the internal table id to find the parent node, supports sorting, it is necessary to integrate sort parameter

        searchparam = Object.assign(searchparam, obj)

      }

    },

 Second, rights management (rights to show the corresponding role)

 

 

    <s-table 
     :columns="columns"
     :data="loadData" 
    
     :rowSelection="rowSelection"
      :dataSource="dataList"
      @change="TableChange">
      <span slot="actions" slot-scope="text, record">
        <a-tag v-for="(actions, index) in record.actions" :key="index">{{ actions.name }}</a-tag>
      </span>
      <span slot="status" slot-scope="text">
        {{ text | statusFilter }}
      </span>

      <span slot="action" slot-scope="text, record">
        <a @click="userEdit(record)">编辑</a>
        <a-divider type="vertical" />
        <a-dropdown>
          <a class="ant-dropdown-link"> 更多 <a-icon type="down" /> </a>
          <a-menu slot="overlay">
            <a-menu-item>
              <a href="javascript:;">详情</a>
            </a-menu-item>
            <a-menu-item>
              <a href="javascript:;">禁用</a>
            </a-menu-item>
            <a-menu-item>
              <a href="javascript:;" @click="delUser(record)">删除</a>
            </a-menu-item>
          </a-menu>
        </a-dropdown>
      </span>
    </s-table>

//数据源
 loadData: parameter => {
        return this.$http
          .post('http://newadmin.8009.org/index.php/index/users/userList', {
            params: Object.assign(parameter, this.queryParam)
          })
          .then(res => {    
            console.log("page===",this.pagination)
           // console.log(' page===',res)
            return res
          })
      },