关于el-table的展开 选择 expand 选项
<div><br></div>
<el-button @click="send()" type="primary">发送</el-button>
<el-button @click="close()" type="danger">关闭</el-button>
<div><br></div>
<el-table :data="da" border style="width: 100%">
<el-table-column type="expand">
<template slot-scope="scope">
<el-table :data="scope.row.children" border style="width: 100%">
<el-table-column label="子菜单">
<template slot-scope="scope">
<!-- 定义选中事件，以及是否选中，Column1CheckedAll 控制全选， -->
<el-checkbox @change="deal(scope.row)"
v-model="scope.row.check"></el-checkbox>
</template>
</el-table-column>
<el-table-column prop="id" label="id" width="100">
<template scope="scope">
<p>{{scope.row.role.id}}</p>
</template>
</el-table-column>
<el-table-column prop="resKey" label="resKey" width="100">
<template scope="scope">
<p>{{scope.row.role.resKey}}</p>
</template>
</el-table-column>
<el-table-column prop="resName" label="resName" width="100">
<template scope="scope">
<p>{{scope.row.role.resName}}</p>
</template>
</el-table-column>
<el-table-column prop="parentId" label="parentId" width="100">
<template scope="scope">
<p>{{scope.row.role.parentId}}</p>
</template>
</el-table-column>
</el-table>
</template>
</el-table-column>
<el-table-column label="选择">
<template slot-scope="scope">
<!-- 定义选中事件，以及是否选中，Column1CheckedAll 控制全选， -->
<el-checkbox @change="deal(scope.row)" v-model="scope.row.check">
</el-checkbox>
</template>
</el-table-column>
<el-table-column prop="id" label="id" width="100">
<template scope="scope">
{{scope.row.role.id}}
</template>
</el-table-column>
<el-table-column prop="resKey" label="resKey" width="100">
<template scope="scope">
<p>{{scope.row.role.resKey}}</p>
</template>
</el-table-column>
<el-table-column prop="resName" label="resName" width="100">
<template scope="scope">
<p>{{scope.row.role.resName}}</p>
</template>
</el-table-column>
<el-table-column prop="parentId" label="parentId" width="100">
<template scope="scope">
<p>{{scope.row.role.parentId}}</p>
</template>
</el-table-column>
</el-table>
</el-dialog>
data数据
data() {
return {
tableData: [],
currentPage: 1,
total: 10,
size: 10,
searchMap: {},
pojo: {},
formVisible: false,
imageUrl: '',
formVisible1: false,
ids: [],
id: '',
da: [],
children: [],
tableData1: [],
}
},
相关js函数
tem() {
this.da = []
for (let i = 0; i < this.tableData1.length; i++) {
if (this.tableData1[i].parentId == 0) {
let node = {
"role": this.tableData1[i],
"check": false,
children: []
}
this.da.push(node)
}
}
for (var i = 0; i < this.da.length; i++) {
for (var j = 0; j < this.tableData1.length; j++) {
if (this.da[i].role.id == this.tableData1[j].parentId) {
let children = {
"role": this.tableData1[j],
"check": false
}
this.da[i].children.push(children)
}
}
}
//console.log(this.da)
},
have(row) {
if (row.check) {
this.ids.push(row.role.id)
} else {
this.ids.splice(this.ids.indexOf(row.role.id), 1);
}
console.log(this.ids)
// console.log(this.row)
},
deal(row) {
if (row.children == null) {
this.have(row)
} else {
if (row.check) {
//console.log(row.children)
for (let i = 0; i < row.children.length; i++) {
if (row.children[i].check == false) {
row.children[i].check = true;
this.have(row.children[i])
}
}
}
this.have(row)
}
},
select(id) {
this.tem()
this.ids=[]
this.id = id
},
close() {
this.formVisible1 = false;
},
send() {
axios.post(`/roleResource/add.do`, {"roleId": this.id, "resourceIds": this.ids}).then(response => {
this.fetchData();
});
alert("发送成功");
this.formVisible1 = false;
},
lll() {
axios.post(`/resource/findPage.do?page=${this.currentPage}&size=${this.size}`, this.searchMap).then(response => {
this.tableData1 = response.data.rows;
this.total = response.data.total;
});
},
转载自本人在CSDN发表的文章blog.csdn.net/yumiao168/a…
