一、如果全部展开
default-expand-all="true"
二、设置有数据的行打开下拉
1、父table需要绑定两个属性expand-row-key和row-key
bash
<el-table
:data="tableData"
:expand-row-keys="expends" //expends是数组，设置你要展开行的id
:row-key="getRowKeys" //通过getRowKeys方法获取到row的行id值
>2、data中设置
bash
data() {
return {
expends:[],
}
}3、methods中设置
bash
methods: {
//设置table中的扩展项，展开的id，此处需要全部展开
getExpends(){
var Id = this.tableData.map(item => item.id)
this.expends = Id
},
getRowKeys(row){
return row.id
},
}如果是有数据的展开：
4、created()中调用 getExpends()，使一打开网页就全部展开（注意你的父tableData数据得先拿到才调用getExpends方法）
bash
created() {
this.getExpends();
},三、对当前展开行内容修改，当前行默认展开
bash
:row-key="getRowKeys"
<!--添加父表默认展开的数组以ID -->
:expand-row-keys="expandednewarr"
@expand-change="expandChange"
bash
<el-table-column align="center" type="expand">
<template slot-scope="props">
<el-table
:data="props.row.list"
row-key="id"
bash
expandChange(row, expandedRows) {
this.expandednewarr = expandedRows.map(item => item.id.toString());
},全部代码：
typescript
<template>
<div class="mod-config">
<el-form
:inline="true"
:model="dataForm"
@keyup.enter.native="getDataList()"
>
<el-form-item>
<el-button type="primary" @click="drawanjuan()">领取案卷</el-button>
</el-form-item>
</el-form>
<el-table
:data="dataList"
v-loading="dataListLoading"
style="width: 100%;"
stripe
:row-key="getRowKeys"
:expand-row-keys="expandednewarr"
@expand-change="expandChange"
max-height="680"
>
<el-table-column align="center" type="expand">
<template slot-scope="props">
<el-table
:data="props.row.list"
style="width: 100%"
class="child-table"
row-key="id"
stripe
>
<el-table-column width="60" align="center"></el-table-column>
<el-table-column prop="id" label="ID" />
<el-table-column prop="anjuanName" label="案卷名称" />
<el-table-column prop="chaijuanStartTime" label="拆卷开始时间">
<template slot-scope="{ row }">
{{ row.chaijuanStartTime || "null" }}
</template>
</el-table-column>
<el-table-column prop="chaijuanEndTime" label="拆卷结束时间">
<template slot-scope="{ row }">
{{ row.chaijuanEndTime || "null" }}
</template>
</el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button
v-if="isAuth('ycl:chaijuanrecord:update')"
type="text"
size="small"
@click="chaijuanstatusbtn(scope.row)"
>
{{ getButtonLabel(scope.row) }}
</el-button>
</template>
</el-table-column>
</el-table>
</template>
</el-table-column>
<el-table-column label="ID" prop="id"></el-table-column>
<el-table-column label="调卷姓名" prop="createName"></el-table-column>
<el-table-column label="调卷数量" prop="numsection"></el-table-column>
<el-table-column label="调卷前缀" prop="diaojuanPrefix"></el-table-column>
<el-table-column label="调卷位置" prop="diaojuanPath"></el-table-column>
<el-table-column label="调卷时间" prop="createTime"></el-table-column>
</el-table>
<el-pagination
@size-change="sizeChangeHandle"
@current-change="currentChangeHandle"
:current-page="pageIndex"
:page-sizes="[10, 20, 50, 100]"
:page-size="pageSize"
:total="totalPage"
layout="total, sizes, prev, pager, next, jumper"
>
</el-pagination>
<add-or-update
v-if="addOrUpdateVisible"
ref="addOrUpdate"
@refreshDataList="getDataList"
></add-or-update>
</div>
</template>
<script>
import AddOrUpdate from "./chaijuanrecord-add-or-update";
export default {
data() {
return {
dataForm: {
archivesCode: "",
archivesName: "",
username: ""
},
dataList: [],
pageIndex: 1,
pageSize: 10,
totalPage: 0,
dataListLoading: false,
dataListSelections: [],
addOrUpdateVisible: false,
expandednewarr: [],
getRowKeys(row) {
return row.id;
}
};
},
components: {
AddOrUpdate
},
activated() {
this.getDataList();
},
methods: {
// 获取数据列表
getDataList() {
this.dataListLoading = true;
this.$http({
url: this.$http.adornUrl("/chai-juan-record/pageList"),
method: "get",
params: this.$http.adornParams({
page: this.pageIndex,
limit: this.pageSize
})
}).then(({ data }) => {
if (data && data.code === 0) {
this.dataList = data.page.list;
this.dataList.forEach(item => {
item.numsection = item.startNumber + "-" + item.endNumber;
});
this.totalPage = data.page.totalCount;
} else {
this.dataList = [];
this.totalPage = 0;
}
this.dataListLoading = false;
});
},
// 每页数
sizeChangeHandle(val) {
this.pageSize = val;
this.pageIndex = 1;
this.getDataList();
},
// 当前页
currentChangeHandle(val) {
this.pageIndex = val;
this.getDataList();
},
drawanjuan() {
this.addOrUpdateVisible = true;
this.$nextTick(() => {
this.$refs.addOrUpdate.init();
});
},
expandChange(row, expandedRows) {
this.expandednewarr = expandedRows.map(item => item.id.toString());
},
chaijuanstatusbtn(row) {
const data = {
id: row.id
};
this.$http({
url: this.$http.adornUrl("/chai-juan-record/startAnEndChaiJuan"),
method: "post",
data: data
}).then(({ data }) => {
if (data && data.code === 0) {
this.getDataList();
}
});
},
getButtonLabel(row) {
if (row.chaijuanStartTime === null) {
return "开始拆卷";
} else if (
row.chaijuanStartTime !== null &&
row.chaijuanEndTime === null
) {
return "结束拆卷";
} else {
return "已完成拆卷";
}
}
}
};
</script>
<style scoped lang="scss">
.mod-config {
padding: 20px;
}
/deep/.el-table tbody tr:hover > td {
background-color: transparent !important;
}
</style>