vueAntDesign多种表格组件
⼀、表格嵌套
<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){
if (expanded) {
}
console.log(record.id)
this.$http.post('xxxx/Device/child',{
'id':record.id
}).then(result=>{
console.log(result)
this.operation2=result
})
},
getDictItem (obj) {
let searchparam = { id: pandedRowKeys[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
.
ant design post('/index.php/index/users/userList', {
params: Object.assign(parameter, this.queryParam)
})
.then(res => {
console.log("page===",this.pagination)
// console.log(' page===',res)
return res
})
},

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。