原文1
原文2
原文3
一、如果全部展开
default-expand-all="true"
二、设置有数据的行打开下拉
1、父table需要绑定两个属性expand-row-key和row-key
<el-table:data="tableData":expand-row-keys="expends" //expends是数组，设置你要展开行的id:row-key="getRowKeys" //通过getRowKeys方法获取到row的行id值>
2、data中设置
data() {return {expends:[],}}
3、methods中设置
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方法）
created() {this.getExpends();},
三、对当前展开行内容修改，当前行默认展开
:row-key="getRowKeys"
<!--添加父表默认展开的数组以ID -->
:expand-row-keys="expandednewarr"
@expand-change="expandChange"
<el-table-column align="center" type="expand"><template slot-scope="props"><el-table:data="props.row.list"row-key="id"
expandChange(row, expandedRows) {this.expandednewarr = expandedRows.map(item => item.id.toString());},
全部代码：
<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-buttonv-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-updatev-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>
