element-ui实现表格el-table展开⾏
  项⽬开发中，遇到个详情页⾯，展⽰项过多，在屏幕上展⽰出现过长的横向滚动条，⽤户体验度不⾼，跟产品协商，由产品列出优先展⽰项，剩下部分折叠
  标红属性:
    row-click: 当某⼀⾏点击时触发
    row-key: ⾏数据的key,⽤于优化talbe的渲染
    expand-row-keys: 可通过这个属性设置表格的当前展开⾏(必需row-key属性)
    expand-change:  ⽤于某⼀⾏点击展开或者关闭时触发(展开⾏时，第⼆个属性为expandedRows，关闭⾏时，第⼆个属性为expanded)
<template>
<el-table :data="tableData" @row-click="rowClick" :row-key='getRowKeys' :expand-row-keys="expands" @expand-change="expandChange" ref="tableList">    <el-table-column type="expand">
<template slot-scope="props">
<el-form label-position="right" inline class="demo-table-expand" align="right">
<el-form-item label="商品名称">
<span>{{ w.name }}</span>
</el-form-item>
<el-form-item label="所属店铺">
<span>{{ w.shop }}</span>
</el-form-item>
<el-form-item label="商品 ID">
<span>{{ w.id }}</span>
</el-form-item>
<el-form-item label="店铺 ID">
<span>{{ w.shopId }}</span>
</el-form-item>
<el-form-item label="商品分类">
<span>{{ w.category }}</span>
</el-form-item>
<el-form-item label="店铺地址">
<span>{{ w.address }}</span>
</el-form-item>
<el-form-item label="商品描述">
<span>{{ w.desc }}</span>
</el-form-item>
element表格横向滚动条</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>
<script>
export default {
data() {
return {
tableData: [
{
id: "12987122",
name: "好滋好味鸡蛋仔",
category: "江浙⼩吃、⼩吃零⾷",
desc: "荷兰优质淡奶，奶⾹浓⽽不腻",
address: "上海市普陀区真北路",
shop: "王⼩虎夫妻店"+'<br>'+"asfdasfafasdfasdfas",
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",
},
],
expands: []
};
},
methods: {
rowClick(row){//点击⾏时展开收起
this.$leRowExpansion(row);
},
expandChange(row,expandedRows){//
let that = this;
if(expandedRows.length){//此时展开
if(row){
}
}else{//折叠
}
},
getRowKeys(row){//⾏数据的key，⽤于优化table的渲染
return row.id;
}
}
};
</script>
<style scoped>
.demo-table-expand {
font-size: 0;
}
.demo-table-expand .el-form-item {
margin-right: 0;
margin-bottom: 0;
width: 50%;
}
</style>
<style>//在添加scoped时未⽣效
.demo-table-expand .label{
width:150px;
color: #99a9bf;
}
</style>
注：代码及数据由官⽹获取更改
后续问题：
  列表中存在操作按钮列，点击操作按钮时，同时会触发row-click
问题解决:
<el-button type="warning" size="mini" circle icon="el-icon-question" @click.stop="diagnose"></el-button>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。