主要是使用Table Events的row-click事件和Table Methods的toggleRowExpansion方法
<el-table
v-loading="loading"
:data="menuList"
row-key="menuId"
:tree-props="{children: 'children', hasChildren: 'hasChildren'}"
ref="menuTable"
row-click="handleRowClick"
>
/** 表格某行点击事件 */
handleRowClick(row, column, event){
// 判断当前行是否有子集,若没有则结束处理
if(row.children || row.children.length === 0) return ;
this.$refs.menuTable.toggleRowExpansion(row);
}
引发问题:
如果表格行里有点击事件,则会造成单击行row-click事件与行中操作按钮的单击事件发生冲突,当点击行里的修改时会切换当前行的展开状态,解决是:将修改按钮的@click改为@click.native.stop,给组件绑定原生事件,阻止单击事件冒泡。
<el-button size="mini"
type="text"
icon="el-icon-edit"
@click.native.stop="handleUpdate(scope.row)"
v-hasPermi="['system:menu:edit']"
>修改</el-button>