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

vue Ant Design 多种表格组件

猜你喜欢