实现效果：点击这一行的任何一个位置都开展开子集。
element 实例效果：
点击图标展开这一行。
<el-table | |
:data="tableData" | |
style="width: 100%;margin-bottom: 20px;" | |
row-key="id" | |
border | |
default-expand-all | |
:tree-props="{children: 'children', hasChildren: 'hasChildren'}"> | |
<el-table-column | |
prop="date" | |
label="日期" | |
sortable | |
width="180"> | |
</el-table-column> | |
<el-table-column | |
prop="name" | |
label="姓名" | |
sortable | |
width="180"> | |
</el-table-column> | |
<el-table-column | |
prop="address" | |
label="地址"> | |
</el-table-column> | |
</el-table> |
数据：
tableData: [{ | |
id: 1, | |
date: '2016-05-02', | |
name: '王小虎', | |
address: '上海市普陀区金沙江路 1518 弄' | |
}, { | |
id: 2, | |
date: '2016-05-04', | |
name: '王小虎', | |
address: '上海市普陀区金沙江路 1517 弄' | |
}, { | |
id: 3, | |
date: '2016-05-01', | |
name: '王小虎', | |
address: '上海市普陀区金沙江路 1519 弄', | |
children: [{ | |
id: 31, | |
date: '2016-05-01', | |
name: '王小虎', | |
address: '上海市普陀区金沙江路 1519 弄' | |
}, { | |
id: 32, | |
date: '2016-05-01', | |
name: '王小虎', | |
address: '上海市普陀区金沙江路 1519 弄' | |
}] | |
}, { | |
id: 4, | |
date: '2016-05-03', | |
name: '王小虎', | |
address: '上海市普陀区金沙江路 1516 弄' | |
}], |
实际实现效果代码
<el-table :data="tableData" style="width: 100%;margin-bottom: 20px;" row-key="key" :default-expand-all="false" | |
:tree-props="{children: 'svnList'}" @row-click="toggleRowExpansion" ref="toggleRowExpansion"> | |
<el-table-column prop="releaseName" label="发布名称"> | |
</el-table-column> | |
<el-table-column prop="vsnName" label="版本" width="180"> | |
</el-table-column> | |
<el-table-column prop="solutionName" label="解决方案"> | |
<template slot-scope="scope"> | |
<span v-if="scope.row.children"><!--3--></span> | |
<span class="jump" v-else @click="jump(scope.row)"><!--4--></span> | |
</template> | |
</el-table-column> | |
<el-table-column prop="description" label="描述"> | |
</el-table-column> | |
<el-table-column prop="pblsStatus" label="状态"> | |
<template slot-scope="scope"> | |
<el-switch v-if="!scope.row.children" v-model="scope.row.pblsStatus" class="demo" active-color="#1890FF" | |
active-text="上架" inactive-color="#C0C0C0" inactive-text="下架" :active-value="true" :inactive-value="false" | |
@change="activeStatusChange($event,scope.row)" /> | |
</template> | |
</el-table-column> | |
<el-table-column label="操作"> | |
<template slot-scope="scope"> | |
<el-button @click="handleDetail(scope.row)" type="text">详情</el-button> | |
<el-button @click="handleAdd(scope.row)" type="text" v-if="!scope.row.children">新增版本</el-button> | |
<el-button @click="handleDel(scope.row)" type="text" class="delete-btn" v-if="!scope.row.children">删除 | |
</el-button> | |
<el-button @click="handleDelVersion(scope.row)" type="text" class="delete-btn" v-if="scope.row.children">删除 | |
</el-button> | |
</template> | |
</el-table-column> | |
</el-table> |
toggleRowExpansion 方法：
// 点击el-table的每一行展开
toggleRowExpansion(row) {
this.$refs.toggleRowExpansion.toggleRowExpansion(row, row.expanded);
},
