vue Ant Design 多種表格組件

一、表格嵌套

 

 

 <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>

第一層循環：

 

點擊+觸發child事件，獲取后台數據，展示二層循環

 child(expanded,record){
        this.expandedRowKeys = [] // 重置展開節點，只展開當前點擊的節點（內部數據調用模板，無法做到同時幾個內層表格數據直接緩存在頁面）
      if (expanded) {
        this.expandedRowKeys = [record.id]
        this.getDictItem() // 獲取表格內部數據
      }
      console.log(record.id)
      this.$http.post('http://xxxx/Device/child',{
               'id':record.id
           }).then(result=>{  
             console.log(result)
             this.operation2=result
        }) 
     },

 getDictItem (obj) {

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

      if (obj) { // 內部表格除了根據其父節點id查找的條件外，還支持排序，因此需要整合排序參數

        searchparam = Object.assign(searchparam, obj)

      }

    },

 二、權限管理 （展示角色所對應的權限）

 

 

    <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
          })
      },