当行内容过多并且不想显示横向滚动条时,可以使用 Table 展开行功能。
官方示例:
test.vue
<template>
??<el-table
????:data="tableData"
????style="width:?100%">
????<el-table-column?type="expand">
??????<template?slot-scope="props">
????????<el-form?label-position="left"?inline?class="demo-table-expand">
??????????<el-form-item?label="商品名称">
????????????<span>{{?props.row.name?}}</span>
??????????</el-form-item>
??????????<el-form-item?label="所属店铺">
????????????<span>{{?props.row.shop?}}</span>
??????????</el-form-item>
??????????<el-form-item?label="商品?ID">
????????????<span>{{?props.row.id?}}</span>
??????????</el-form-item>
??????????<el-form-item?label="店铺?ID">
????????????<span>{{?props.row.shopId?}}</span>
??????????</el-form-item>
??????????<el-form-item?label="商品分类">
????????????<span>{{?props.row.category?}}</span>
??????????</el-form-item>
??????????<el-form-item?label="店铺地址">
????????????<span>{{?props.row.address?}}</span>
??????????</el-form-item>
??????????<el-form-item?label="商品描述">
????????????<span>{{?props.row.desc?}}</span>
??????????</el-form-item>
????????</el-form>
??????</template>
????</el-table-column>
????<el-table-column
??????label="商品?ID"
??????prop="id">
????</el-table-column>
????<el-table-column
??????label="商品名称"
??????prop="name">
????</el-table-column>
????<el-table-column
??????label="描述"
??????prop="desc">
????</el-table-column>
??</el-table>
</template>
<style>
??.demo-table-expand?{
????font-size:?0;
??}
??.demo-table-expand?label?{
????width:?90px;
????color:?#99a9bf;
??}
??.demo-table-expand?.el-form-item?{
????margin-right:?0;
????margin-bottom:?0;
????width:?50%;
??}
</style>
<script>
??export?default?{
????data()?{
??????return?{
????????tableData:?[{
??????????id:?'12987122',
??????????name:?'好滋好味鸡蛋仔',
??????????category:?'江浙小吃、小吃零食',
??????????desc:?'荷兰优质淡奶,奶香浓而不腻',
??????????address:?'上海市普陀区真北路',
??????????shop:?'王小虎夫妻店',
??????????shopId:?'10333'
????????},?{
??????????id:?'12987123',
??????????name:?'好滋好味鸡蛋仔',
??????????category:?'江浙小吃、小吃零食',
??????????desc:?'荷兰优质淡奶,奶香浓而不腻',
??????????address:?'上海市普陀区真北路',
??????????shop:?'王小虎夫妻店',
??????????shopId:?'10333'
????????},?{
??????????id:?'12987125',
??????????name:?'好滋好味鸡蛋仔',
??????????category:?'江浙小吃、小吃零食',
??????????desc:?'荷兰优质淡奶,奶香浓而不腻',
??????????address:?'上海市普陀区真北路',
??????????shop:?'王小虎夫妻店',
??????????shopId:?'10333'
????????},?{
??????????id:?'12987126',
??????????name:?'好滋好味鸡蛋仔',
??????????category:?'江浙小吃、小吃零食',
??????????desc:?'荷兰优质淡奶,奶香浓而不腻',
??????????address:?'上海市普陀区真北路',
??????????shop:?'王小虎夫妻店',
??????????shopId:?'10333'
????????}]
??????}
????}
??}
</script>
刷新页面,效果如下:
增加属性:default-expand-all="true"
test.vue完整代码:
<template>
??<el-table
????:data="tableData"?:default-expand-all="true"
????style="width:?100%">
????<el-table-column?type="expand">
??????<template?slot-scope="props">
????????<el-form?label-position="left"?inline?class="demo-table-expand">
??????????<el-form-item?label="商品名称">
????????????<span>{{?props.row.name?}}</span>
??????????</el-form-item>
??????????<el-form-item?label="所属店铺">
????????????<span>{{?props.row.shop?}}</span>
??????????</el-form-item>
??????????<el-form-item?label="商品?ID">
????????????<span>{{?props.row.id?}}</span>
??????????</el-form-item>
??????????<el-form-item?label="店铺?ID">
????????????<span>{{?props.row.shopId?}}</span>
??????????</el-form-item>
??????????<el-form-item?label="商品分类">
????????????<span>{{?props.row.category?}}</span>
??????????</el-form-item>
??????????<el-form-item?label="店铺地址">
????????????<span>{{?props.row.address?}}</span>
??????????</el-form-item>
??????????<el-form-item?label="商品描述">
????????????<span>{{?props.row.desc?}}</span>
??????????</el-form-item>
????????</el-form>
??????</template>
????</el-table-column>
????<el-table-column
??????label="商品?ID"
??????prop="id">
????</el-table-column>
????<el-table-column
??????label="商品名称"
??????prop="name">
????</el-table-column>
????<el-table-column
??????label="描述"
??????prop="desc">
????</el-table-column>
??</el-table>
</template>
<style>
??.demo-table-expand?{
????font-size:?0;
??}
??.demo-table-expand?label?{
????width:?90px;
????color:?#99a9bf;
??}
??.demo-table-expand?.el-form-item?{
????margin-right:?0;
????margin-bottom:?0;
????width:?50%;
??}
</style>
<script>
??export?default?{
????data()?{
??????return?{
????????tableData:?[{
??????????id:?'12987122',
??????????name:?'好滋好味鸡蛋仔',
??????????category:?'江浙小吃、小吃零食',
??????????desc:?'荷兰优质淡奶,奶香浓而不腻',
??????????address:?'上海市普陀区真北路',
??????????shop:?'王小虎夫妻店',
??????????shopId:?'10333'
????????},?{
??????????id:?'12987123',
??????????name:?'好滋好味鸡蛋仔',
??????????category:?'江浙小吃、小吃零食',
??????????desc:?'荷兰优质淡奶,奶香浓而不腻',
??????????address:?'上海市普陀区真北路',
??????????shop:?'王小虎夫妻店',
??????????shopId:?'10333'
????????},?{
??????????id:?'12987125',
??????????name:?'好滋好味鸡蛋仔',
??????????category:?'江浙小吃、小吃零食',
??????????desc:?'荷兰优质淡奶,奶香浓而不腻',
??????????address:?'上海市普陀区真北路',
??????????shop:?'王小虎夫妻店',
??????????shopId:?'10333'
????????},?{
??????????id:?'12987126',
??????????name:?'好滋好味鸡蛋仔',
??????????category:?'江浙小吃、小吃零食',
??????????desc:?'荷兰优质淡奶,奶香浓而不腻',
??????????address:?'上海市普陀区真北路',
??????????shop:?'王小虎夫妻店',
??????????shopId:?'10333'
????????}]
??????}
????}
??}
</script>
刷新页面,效果如下:
需要增加属性
:row-key="getRowKeys" :expand-row-keys="expands"
比如:指定第二行,默认展开
test.vue完整代码:
<template>
??<el-table
????:data="tableData"?:row-key="getRowKeys"
????:expand-row-keys="expands"
????style="width:?100%">
????<el-table-column?type="expand">
??????<template?slot-scope="props">
????????<el-form?label-position="left"?inline?class="demo-table-expand">
??????????<el-form-item?label="商品名称">
????????????<span>{{?props.row.name?}}</span>
??????????</el-form-item>
??????????<el-form-item?label="所属店铺">
????????????<span>{{?props.row.shop?}}</span>
??????????</el-form-item>
??????????<el-form-item?label="商品?ID">
????????????<span>{{?props.row.id?}}</span>
??????????</el-form-item>
??????????<el-form-item?label="店铺?ID">
????????????<span>{{?props.row.shopId?}}</span>
??????????</el-form-item>
??????????<el-form-item?label="商品分类">
????????????<span>{{?props.row.category?}}</span>
??????????</el-form-item>
??????????<el-form-item?label="店铺地址">
????????????<span>{{?props.row.address?}}</span>
??????????</el-form-item>
??????????<el-form-item?label="商品描述">
????????????<span>{{?props.row.desc?}}</span>
??????????</el-form-item>
????????</el-form>
??????</template>
????</el-table-column>
????<el-table-column
??????label="商品?ID"
??????prop="id">
????</el-table-column>
????<el-table-column
??????label="商品名称"
??????prop="name">
????</el-table-column>
????<el-table-column
??????label="描述"
??????prop="desc">
????</el-table-column>
??</el-table>
</template>
<style>
??.demo-table-expand?{
????font-size:?0;
??}
??.demo-table-expand?label?{
????width:?90px;
????color:?#99a9bf;
??}
??.demo-table-expand?.el-form-item?{
????margin-right:?0;
????margin-bottom:?0;
????width:?50%;
??}
</style>
<script>
??export?default?{
????data()?{
??????return?{
????????tableData:?[{
??????????id:?'12987122',
??????????name:?'好滋好味鸡蛋仔',
??????????category:?'江浙小吃、小吃零食',
??????????desc:?'荷兰优质淡奶,奶香浓而不腻',
??????????address:?'上海市普陀区真北路',
??????????shop:?'王小虎夫妻店',
??????????shopId:?'10333'
????????},?{
??????????id:?'12987123',
??????????name:?'好滋好味鸡蛋仔',
??????????category:?'江浙小吃、小吃零食',
??????????desc:?'荷兰优质淡奶,奶香浓而不腻',
??????????address:?'上海市普陀区真北路',
??????????shop:?'王小虎夫妻店',
??????????shopId:?'10333'
????????},?{
??????????id:?'12987125',
??????????name:?'好滋好味鸡蛋仔',
??????????category:?'江浙小吃、小吃零食',
??????????desc:?'荷兰优质淡奶,奶香浓而不腻',
??????????address:?'上海市普陀区真北路',
??????????shop:?'王小虎夫妻店',
??????????shopId:?'10333'
????????},?{
??????????id:?'12987126',
??????????name:?'好滋好味鸡蛋仔',
??????????category:?'江浙小吃、小吃零食',
??????????desc:?'荷兰优质淡奶,奶香浓而不腻',
??????????address:?'上海市普陀区真北路',
??????????shop:?'王小虎夫妻店',
??????????shopId:?'10333'
????????}],
????????//?获取row的key值
????????getRowKeys(row)?{
??????????return?row.id;
????????},
????????//?要展开的行,数值的元素是row的key值
????????expands:?[]
??????}
????},
????mounted()?{
??????//?在这里你想初始化的时候展开哪一行都可以了
??????this.expands.push(this.tableData[1].id);
????}
??}
</script>
刷新页面,效果如下:
现有一个需求,展开某行后,再次刷新页面后,默认展开刚才点击的那一行。
需要添加属性?@current-change
这里还使用了localStorage用来存储,点击过的行id。实际生产环境,可以使用vuex来存储点击的id。
test.vue完整代码如下:
<template>
??<el-table
????:data="tableData"?:row-key="getRowKeys"
????:expand-row-keys="expands"
????@current-change="toggleRowExpansion"
????style="width:?100%">
????<el-table-column?type="expand">
??????<template?slot-scope="props">
????????<el-form?label-position="left"?inline?class="demo-table-expand">
??????????<el-form-item?label="商品名称">
????????????<span>{{?props.row.name?}}</span>
??????????</el-form-item>
??????????<el-form-item?label="所属店铺">
????????????<span>{{?props.row.shop?}}</span>
??????????</el-form-item>
??????????<el-form-item?label="商品?ID">
????????????<span>{{?props.row.id?}}</span>
??????????</el-form-item>
??????????<el-form-item?label="店铺?ID">
????????????<span>{{?props.row.shopId?}}</span>
??????????</el-form-item>
??????????<el-form-item?label="商品分类">
????????????<span>{{?props.row.category?}}</span>
??????????</el-form-item>
??????????<el-form-item?label="店铺地址">
????????????<span>{{?props.row.address?}}</span>
??????????</el-form-item>
??????????<el-form-item?label="商品描述">
????????????<span>{{?props.row.desc?}}</span>
??????????</el-form-item>
????????</el-form>
??????</template>
????</el-table-column>
????<el-table-column
??????label="商品?ID"
??????prop="id">
????</el-table-column>
????<el-table-column
??????label="商品名称"
??????prop="name">
????</el-table-column>
????<el-table-column
??????label="描述"
??????prop="desc">
????</el-table-column>
??</el-table>
</template>
<style>
??.demo-table-expand?{
????font-size:?0;
??}
??.demo-table-expand?label?{
????width:?90px;
????color:?#99a9bf;
??}
??.demo-table-expand?.el-form-item?{
????margin-right:?0;
????margin-bottom:?0;
????width:?50%;
??}
</style>
<script>
??export?default?{
????data()?{
??????return?{
????????tableData:?[{
??????????id:?'12987122',
??????????name:?'好滋好味鸡蛋仔',
??????????category:?'江浙小吃、小吃零食',
??????????desc:?'荷兰优质淡奶,奶香浓而不腻',
??????????address:?'上海市普陀区真北路',
??????????shop:?'王小虎夫妻店',
??????????shopId:?'10333'
????????},?{
??????????id:?'12987123',
??????????name:?'好滋好味鸡蛋仔',
??????????category:?'江浙小吃、小吃零食',
??????????desc:?'荷兰优质淡奶,奶香浓而不腻',
??????????address:?'上海市普陀区真北路',
??????????shop:?'王小虎夫妻店',
??????????shopId:?'10333'
????????},?{
??????????id:?'12987125',
??????????name:?'好滋好味鸡蛋仔',
??????????category:?'江浙小吃、小吃零食',
??????????desc:?'荷兰优质淡奶,奶香浓而不腻',
??????????address:?'上海市普陀区真北路',
??????????shop:?'王小虎夫妻店',
??????????shopId:?'10333'
????????},?{
??????????id:?'12987126',
??????????name:?'好滋好味鸡蛋仔',
??????????category:?'江浙小吃、小吃零食',
??????????desc:?'荷兰优质淡奶,奶香浓而不腻',
??????????address:?'上海市普陀区真北路',
??????????shop:?'王小虎夫妻店',
??????????shopId:?'10333'
????????}],
????????//?获取row的key值
????????getRowKeys(row)?{
??????????return?row.id;
????????},
????????//?要展开的行,数值的元素是row的key值
????????expands:?[]
??????}
????},
????mounted()?{
??????console.log('check_id',localStorage.getItem('check_id'))
??????//?默认将check_id添加到列表中,用于刷新默认展开指定的行
??????this.expands.push(localStorage.getItem('check_id'));
????},
????methods:{
??????toggleRowExpansion(row){
????????//?console.log("toggleRowExpansion",row)
????????//?清空数组
????????this.expands?=?[];
????????//?添加指定的id
????????this.expands.push(row.id);
????????//?保存点击的id
????????localStorage.setItem('check_id',row.id)
??????},
????}
??}
</script>
刷新页面,点击第3行,然后刷新页面,效果如下: