element-ui el-table表格展开行 并且默认展开一行
效果图：
<el-table
ref="table"
:data="tablesData"
style="width: 100%"
:header-cell-style="{
background: '#FAFAFA',
color: '#000000',
borderRight: '1px solid #fff'
}"
:height="tableHeight"
:row-key="getRowKeys"
:expand-row-keys="expands"
>
<el-table-column type="expand">
<template slot-scope="scope">
<el-form label-position="left" class="demo-table-expand">
<el-form-item
:label="'同住人' + (index + 1)"
v-for="(item, index) in scope.row.mate_list"
:key="index"
>
<span class="expand-text">{{ item.name }}</span>
<span class="expand-text">{{ sexType[item.gender] }}</span>
<span class="expand-text">{{ item.id_no }}</span>
<span class="expand-text">{{ item.phone_number }}</span>
<span>{{ item.relationship }}</span>
</el-form-item>
</el-form>
</template>
</el-table-column>
<el-table-column label="#" width="55" align="center">
<template slot-scope="scope">
<span v-text="getIndex(scope.$index)"></span>
</template>
</el-table-column>
<el-table-column label="承租人">
<template slot-scope="scope">
<span
v-html="showDate(scope.row.name)"
v-if="scope.row.name"
></span>
<span v-else>-</span>
</template>
</el-table-column>
<el-table-column label="身份证号码" min-width="110">
<template slot-scope="scope">
{{ scope.row.id_no }}
</template>
</el-table-column>
<el-table-column label="电话号码">
<template slot-scope="scope">
<span>{{ scope.row.phone_number }}</span>
</template>
</el-table-column>
</el-table>
data() {
return {
dataList: [],
getRowKeys(row) {
return row.id
},
// 要展开的行，数值的元素是row的key值
expands: []
}
},
mounted() {
// 放入默认展开行
this.expands.push(this.dataList[0].id)
},
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/64803.html
