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)
},