需求:在开发中会遇到很多表格嵌套表格的使用,一个父级表格通过展开行要打开子级的表格,如果利用官网中的展开行的方式去实现其实是有点困难的
首先实现行展开,这个是用到了elementUI中的一个属性通过设置 type="expand" 和 Scoped slot 可以开启展开行功能,el-table-column 的模板会被渲染成为展开行的内容，展开行可访问的属性与使用自定义列模板时的 Scoped slot 相同。代码如下
<el-table-column type="expand" class="childtable">
<template slot-scope="props">
<el-table
ref="multipleTable"
:data="props.row.sonData"
style="width: 100%; margin-left: 0"
max-height="360"
:row-style="rowStyle"
:header-cell-style="rowStyle"
:cell-style="rowStyle"
>
<el-table-column width="55">
<template slot-scope="scope">
<el-checkbox v-model="scope.row.ischecked" @change="changeVal(scope.row)"></el-checkbox>
</template>
</el-table-column>
<el-table-column prop="xuhao" label="序号"> </el-table-column>
<el-table-column
prop="name"
label="姓名"
:filters="fiterNameData"
:filter-method="filterTag"
filter-placement="bottom-end"
>
</el-table-column>
<el-table-column prop="info" label="专业"> </el-table-column>
<el-table-column
prop="sfz"
label="身份证号"
:filters="fiterNumberData"
:filter-method="fiterNumber"
filter-placement="bottom-end"
>
</el-table-column>
<el-table-column
prop="phone"
label="联系电话"
:filters="fiterPhoneData"
:filter-method="fiterPhone"
filter-placement="bottom-end"
>
</el-table-column>
</el-table>
</template>
</el-table-column>2.在data中声明一个数组,用来渲染表格的展示,数据可以类似于树形结构的模式来整理
tableData: [
//外层table的数据
{
id: "230211181611f0bWSLJG7copryh9Wv0",
xuhao: 1,
sameId: 1,
zyml: "信息安全",
yjyz: "信息安全",
ejzy: "大数据安全研究",
sjzy: "大数据管理",
zylb: "组长级",
addr: "南昌市",
type: "遴选",
number: 20,
paixu:1,
sonData: [
//把要嵌套的内层table数据，放在父级table的一个字段里
{
cid: "fthgs",
sameId: 1,
name: "陈涛",
info: "信息安全",
sfz: "612454779799",
phone: "134154647",
ischecked: false,
paixu:1,
xuhao: 1,
},
{
cid: "trh",
sameId: 1,
name: "张三",
info: "信息安全",
sfz: "4564648979789",
phone: "46497987",
ischecked: false,
paixu:1,
xuhao: 2,
},
{
cid: "5823435",
sameId: 1,
name: "李四",
info: "信息安全",
sfz: "666797964665",
phone: "4687899999999",
ischecked: false,
paixu:1,
xuhao: 3,
},
],
},
],3.因为子级的每一行的数据是单选的模式,我这里用了el-checkbox去实现的,所以在子级里面绑定了一个字段ischecked去控制,选中还是取消选中
<el-table-column width="55">
<template slot-scope="scope">
<el-checkbox v-model="scope.row.ischecked" @change="changeVal(scope.row)"></el-checkbox>
</template>
</el-table-column>4.表格默认进入展开第一行,这个可以在父级的table身上绑定一个ref属性,在初始化的时候默认展开第一行
this.$nextTick(() => {
this.$refs.isExpand.toggleRowExpansion(this.tableData[0], true);
});最终的实现效果;
附上完整代码
<template>
<div>
<div class="bg">
<div class="lxbox">
<!-- 头部 -->
<div class="top">
<span class="title">遴选</span>
<div class="img"></div>
</div>
<!-- 中间表格 -->
<div class="lvtables">
<el-table :data="tableData" style="width: 100%" ref="isExpand" max-height="860">
<el-table-column type="expand" class="childtable">
<template slot-scope="props">
<el-table
ref="multipleTable"
:data="props.row.sonData"
style="width: 100%; margin-left: 0"
max-height="360"
:row-style="rowStyle"
:header-cell-style="rowStyle"
:cell-style="rowStyle"
>
<el-table-column width="55">
<template slot-scope="scope">
<el-checkbox v-model="scope.row.ischecked" @change="changeVal(scope.row)"></el-checkbox>
</template>
</el-table-column>
<el-table-column prop="xuhao" label="序号"> </el-table-column>
<el-table-column
prop="name"
label="姓名"
:filters="fiterNameData"
:filter-method="filterTag"
filter-placement="bottom-end"
>
</el-table-column>
<el-table-column prop="info" label="专业"> </el-table-column>
<el-table-column
prop="sfz"
label="身份证号"
:filters="fiterNumberData"
:filter-method="fiterNumber"
filter-placement="bottom-end"
>
</el-table-column>
<el-table-column
prop="phone"
label="联系电话"
:filters="fiterPhoneData"
:filter-method="fiterPhone"
filter-placement="bottom-end"
>
</el-table-column>
</el-table>
</template>
</el-table-column>
<el-table-column prop="xuhao" label="序号"></el-table-column>
<el-table-column prop="zyml" label="专业门类"></el-table-column>
<el-table-column prop="yjyz" label="一级专业"></el-table-column>
<el-table-column prop="ejzy" label="二级专业"></el-table-column>
<el-table-column prop="sjzy" label="三级专业"></el-table-column>
<el-table-column prop="zylb" label="专业类别"></el-table-column>
<el-table-column prop="addr" label="常住工作地"></el-table-column>
<el-table-column prop="type" label="组建方式"></el-table-column>
<el-table-column prop="number" label="可抽取人数"></el-table-column>
</el-table>
</div>
<!-- 底部按钮 -->
<div class="bottom">
<el-button plain>取消</el-button>
<el-button type="primary" @click="submit">确定</el-button>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [
//外层table的数据
{
id: "230211181611f0bWSLJG7copryh9Wv0",
xuhao: 1,
sameId: 1,
zyml: "信息安全",
yjyz: "信息安全",
ejzy: "大数据安全研究",
sjzy: "大数据管理",
zylb: "组长级",
addr: "南昌市",
type: "遴选",
number: 20,
paixu:1,
sonData: [
//把要嵌套的内层table数据，放在父级table的一个字段里
{
cid: "fthgs",
sameId: 1,
name: "陈涛",
info: "信息安全",
sfz: "612454779799",
phone: "134154647",
ischecked: false,
paixu:1,
xuhao: 1,
},
{
cid: "trh",
sameId: 1,
name: "张三",
info: "信息安全",
sfz: "4564648979789",
phone: "46497987",
ischecked: false,
paixu:1,
xuhao: 2,
},
{
cid: "5823435",
sameId: 1,
name: "李四",
info: "信息安全",
sfz: "666797964665",
phone: "4687899999999",
ischecked: false,
paixu:1,
xuhao: 3,
},
{
cid: "frgvsdfg",
sameId: 1,
name: "王五",
info: "信息安全",
sfz: "156496797",
phone: "65444478788",
ischecked: false,
paixu:1,
xuhao: 4,
},
],
},
{
id: "230211181611f0bWSLJG7cop156454ryh9Wv0",
xuhao: 2,
sameId: 2,
zyml: "信息安全",
yjyz: "信息安全",
ejzy: "大数据安全研究",
sjzy: "大数据管理",
zylb: "组长级",
addr: "南昌市",
type: "遴选",
number: 20,
paixu:2,
sonData: [
//把要嵌套的内层table数据，放在父级table的一个字段里
{
cid: "gdfgvdsfg",
sameId: 2,
name: "陈涛",
info: "信息安全",
sfz: "612454779799",
phone: "134154647",
ischecked: false,
paixu:2,
xuhao: 1,
},
{
cid: "rdgrvfdsfgv",
sameId: 2,
name: "张三",
info: "信息安全",
sfz: "4564648979789",
phone: "46497987",
ischecked: false,
paixu:2,
xuhao: 2,
},
{
cid: "gfhsd",
sameId: 2,
name: "李四",
info: "信息安全",
sfz: "666797964665",
phone: "4687899999999",
ischecked: false,
paixu:2,
xuhao: 3,
},
{
cid: "hfdgvsd",
sameId: 2,
name: "王五",
info: "信息安全",
sfz: "156496797",
phone: "65444478788",
ischecked: false,
paixu:2,
xuhao: 4,
},
],
},
{
id: "dasdsda14564ad9s9ad4",
xuhao: 3,
sameId: 3,
zyml: "信息安全",
yjyz: "信息安全",
ejzy: "大数据安全研究",
sjzy: "大数据管理",
zylb: "组长级",
addr: "南昌市",
type: "遴选",
number: 20,
paixu:3,
sonData: [
//把要嵌套的内层table数据，放在父级table的一个字段里
{
cid: "fgvsdgsefvcdfxghrtf",
sameId: 3,
name: "陈涛",
info: "信息安全",
sfz: "612454779799",
phone: "134154647",
ischecked: false,
paixu:3,
xuhao: 1,
},
{
cid: "25543274258",
sameId: 3,
name: "张三",
info: "信息安全",
sfz: "4564648979789",
phone: "46497987",
ischecked: false,
paixu:3,
xuhao: 2,
},
{
cid: "rtfefbhdfxrtfg34 ",
sameId: 3,
name: "李四",
info: "信息安全",
sfz: "666797964665",
phone: "4687899999999",
ischecked: false,
paixu:3,
xuhao: 3,
},
{
cid: "47527ddfxgbrf",
sameId: 3,
name: "王五",
info: "信息安全",
sfz: "156496797",
phone: "65444478788",
ischecked: false,
paixu:3,
xuhao: 4,
},
],
},
{
id: "djaoud9q7y98ye2oh3r",
xuhao: 4,
sameId: 4,
zyml: "信息安全",
yjyz: "信息安全",
ejzy: "大数据安全研究",
sjzy: "大数据管理",
zylb: "组长级",
addr: "南昌市",
type: "遴选",
number: 20,
paixu:4,
sonData: [
//把要嵌套的内层table数据，放在父级table的一个字段里
{
cid: "452574dgvdbvdfc",
sameId: 4,
name: "陈涛",
info: "信息安全",
sfz: "612454779799",
phone: "134154647",
ischecked: false,
paixu:4,
xuhao: 1,
},
{
cid: "kifdhgoiuy89jkh98yugb",
sameId: 4,
name: "张三",
info: "信息安全",
sfz: "4564648979789",
phone: "46497987",
ischecked: false,
paixu:4,
xuhao: 2,
},
{
cid: "nmkjsfhdf87ye74gfhkdvgcfyu",
sameId: 4,
name: "李四",
info: "信息安全",
sfz: "666797964665",
phone: "4687899999999",
ischecked: false,
paixu:4,
xuhao: 3,
},
{
cid: "njuifewhdsiuy798gbug",
sameId: 4,
name: "王五",
info: "信息安全",
sfz: "156496797",
phone: "65444478788",
ischecked: false,
paixu:4,
xuhao: 4,
},
],
},
],
// 姓名筛选
fiterNameData: [
{
text: "陈涛",
value: "陈涛",
},
{
text: "张三",
value: "张三",
},
{
text: "李四",
value: "李四",
},
{
text: "王五",
value: "王五",
},
],
// 身份证筛选
fiterNumberData: [
{
text: "612454779799",
value: "612454779799",
},
{
text: "4564648979789",
value: "4564648979789",
},
{
text: "666797964665",
value: "666797964665",
},
{
text: "156496797",
value: "156496797",
},
],
// 联系电话筛选
fiterPhoneData: [
{
text: "134154647",
value: "134154647",
},
{
text: "46497987",
value: "46497987",
},
{
text: "4687899999999",
value: "4687899999999",
},
{
text: "65444478788",
value: "65444478788",
},
],
//多选的值
father: [],
son: [],
};
},
methods: {
// 调整行样式
rowStyle({ row, rowIndex }) {
let bgcolor = {
background: "#f1f2f3",
borderBottom: "1px solid #d9d9d9",
};
return bgcolor;
},
// 过滤姓名
filterTag(value, row) {
return row.name === value;
},
// 过滤身份证
fiterNumber(value, row) {
return row.operation === value;
},
// 过滤电话号码
fiterPhone(value, row) {
return row.phone === value;
},
changeVal(val){
if(val.ischecked==true){
this.handleSelectionChange(val)
}else{
this.son.forEach((item,index)=>{
if(val.cid==item.cid){
this.son.splice(index,1)
this.father.splice(index,1)
}
})
}
},
// 单选框的选中值
handleSelectionChange(val) {
let that=this
this.tableData.forEach((item) => {
if(item.sonData && val.sameId==item.sameId){
let index=that.father.findIndex((item3)=>{
return item3.sameId==val.sameId
})
if(index>=0){
that.father.splice(index,1)
}
that.father.push(item)
item.sonData.forEach((item2)=>{
if(item2.cid!=val.cid){
item2.ischecked = false;
}else if(item2.cid==val.cid){
let index2=that.son.findIndex((item4)=>{
return item4.sameId==item2.sameId
})
if(index>=0){
that.son.splice(index2,1)
}
that.son.push(item2)
}
})
}
});
},
// 点击确定按钮
submit() {
if (this.tableData.length==this.father.length && this.tableData.length==this.son.length) {
this.$message({
message: "恭喜你，提交成功",
type: "success",
});
} else {
this.$message({
message: "您还没有完成选中信息哦!!!",
type: "warning",
});
}
},
},
mounted() {
this.$nextTick(() => {
this.$refs.isExpand.toggleRowExpansion(this.tableData[0], true);
});
},
};
</script>
<style lang="scss">
@import "../style/util.scss";
.el-table-filter {
// background-color: pink;
width: vw(180) !important;
height: vh(160) !important;
padding-right: vw(5);
// left: vw(720) !important;
.el-checkbox__inner {
width: vw(20);
height: vh(20);
}
.el-checkbox__input.is-checked .el-checkbox__inner::after {
width: vw(8);
height: vh(8);
left: vw(4);
top: vh(2);
}
.el-table-filter__wrap {
max-height: vh(100);
padding: vw(10);
}
.el-table-filter__bottom {
// padding: vw(5)
}
.el-table-filter__bottom button {
font-size: vw(18);
padding: vw(10);
}
.el-table-filter__checkbox-group label.el-checkbox {
height: vh(30);
}
}
</style>
<style lang="scss" scoped>
@import "../style/util.scss";
.bg {
width: 100vw;
height: 100vh;
// background: rgba(0, 0, 0, 0.3);
position: relative;
user-select: none;
.lxbox {
// width: vw(1471);
width: 100%;
height: vh(792);
height: 100vh;
box-sizing: border-box;
background: #ffffff;
border-radius: 0px 0 vw(4) vw(4);
position: absolute;
// top: 50%;
left: 50%;
transform: translateX(-50%);
.top {
width: vw(1471);
width: 100%;
height: vh(55);
background: #fff;
display: flex;
justify-content: space-between;
padding: vh(12) vw(24);
box-sizing: border-box;
border-bottom: 1px solid rgba(0, 0, 0, 0.09);
.title {
font-family: "PingFangSC-Medium";
font-size: vw(16);
color: rgba(0, 0, 0, 0.85);
line-height: vh(24);
font-weight: 600;
}
.img {
width: vw(24);
height: vh(24);
background: url("../assets/close.png") no-repeat;
background-size: contain;
}
}
.lvtables {
width: vw(1471);
width: 100%;
height: vh(690);
height: vh(900);
overflow: auto;
padding: 0 vw(24);
box-sizing: border-box;
&::-webkit-scrollbar {
width: 0;
}
}
.bottom {
width: vw(1471);
width: 100%;
position: absolute;
bottom: 0;
height: vh(55);
background: #fff;
border-top: 1px solid rgba(0, 0, 0, 0.09);
display: flex;
padding-right: vw(32);
box-sizing: border-box;
justify-content: flex-end;
align-items: center;
}
}
>>> .el-button {
width: vw(88);
height: vh(32);
font-size: vw(16);
}
>>> .el-button--default {
margin-right: vw(14);
color: rgba(0, 0, 0, 0.65);
font-weight: 400;
height: vh(38);
line-height: vh(35);
}
>>> .el-button--primary {
font-weight: 400;
height: vh(38);
line-height: vh(35);
}
>>> .el-checkbox__inner {
width: vw(22);
height: vh(22);
}
>>> .el-checkbox__inner::after {
width: vw(10);
height: vh(10);
border: vw(2) solid #fff;
border-left: 0;
border-top: 0;
left: vw(4);
top: vh(0);
}
>>> .el-checkbox__input.is-checked .el-checkbox__inner::after {
transform: rotate(40deg) scaleY(1.2);
}
>>> .el-checkbox__input.is-indeterminate .el-checkbox__inner::before {
transform: scaleY(0.5);
top: 45%;
border: 1px solid #fff;
}
>>> .el-table .cell {
line-height: vh(48) !important;
text-align: center !important;
}
>>> .el-table__expand-icon {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
margin-right: vw(20);
position: absolute;
left: 34%;
top: 34%;
user-select: none;
color: rgb(175, 175, 175);
}
>>> .el-table__expand-icon .el-icon-arrow-right {
font-weight: bold;
}
>>> .el-table__expand-icon .el-icon-arrow-right::before {
content: "\e6d9";
border: 1px solid rgb(175, 175, 175);
padding: vw(3);
font-size: vw(10);
}
>>> .el-table__expand-icon--expanded .el-icon-arrow-right::before {
content: "\e6d8";
font-weight: bold;
padding: vw(3);
font-size: vw(10);
}
}
>>> .el-table-filter {
width: vw(500) !important;
height: vh(200) !important;
}
>>> .el-table thead {
font-family: "PingFangSC-Medium";
font-size: vw(16);
color: #333333;
letter-spacing: 0;
font-weight: 500;
}
>>> .el-table__empty-block {
min-height: vh(35);
line-height: vh(35);
}
>>> .el-table__header {
.el-checkbox {
display: none;
}
}
>>>.el-table td.el-table__cell div{
font-family: 'PingFangSC-Regular';
font-size: vw(16);
color: #333333;
line-height: vh(36);
}
>>>.el-table__column-filter-trigger i{
transform: scale(1.3);
margin-left: vw(5);
background: #FFFFFF;
border: 1px solid rgba(230,230,230,1);
}
>>>.el-icon-arrow-down:before{
content: "\e790" !important;
}
>>>.el-table__body-wrapper {
&::-webkit-scrollbar {
// width: 0 !important;
}
}
</style>