el-table树类型数据,实现点击某行切换其展开状态

主要是使用Table Eventsrow-click事件和Table MethodstoggleRowExpansion方法

<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>

 

 

您可以通过使用scoped slots来实现点击第二个el-table-column中染的数据来控制第一个el-table-column的展开或闭合。首先,您需要在第一个el-table-column中使用type="expand"来指示它可以展开。然后,您可以在第二个el-table-column中使用scoped slots来渲染数据,并在其中添加一个点击事件处理程序。 示例代码如下: ```html <el-table :data="tableData"> <el-table-column type="expand"> <!-- 第一个el-table-column --> <template slot-scope="props"> <!-- 展开内容 --> <p>{{ props.row.description }}</p> </template> </el-table-column> <el-table-column> <!-- 第二个el-table-column --> <template slot-scope="props"> <!-- 渲染数据 --> <p @click="toggleExpand(props.row)">{{ props.row.data }}</p> </template> </el-table-column> </el-table> ``` 在上面的代码中,我假设您有一个名为`tableData`的数组来存储表格数据。第一个el-table-column使用了type="expand"来指示它可以展开,并使用scoped slots来渲染展开内容。第二个el-table-column使用scoped slots来渲染数据,并在数据元素上添加了一个点击事件处理程序toggleExpand。 在您的Vue组件中,您需要添加一个toggleExpand方法来控制第一个el-table-column的展开或闭合状态。这个方法可以根据需要使用某个标识属性来控制展开状态。例如: ```javascript methods: { toggleExpand(row) { row.expanded = !row.expanded; // 切换展开状态 } } ``` 在上面的代码中,我假设您的表格数据的每个元素都有一个名为`expanded`的属性来存储展开状态。通过切换expanded属性的值,您可以控制第一个el-table-column的展开或闭合。 请根据您的实际情况调整代码,并确保在Vue组件中正确设置toggleExpand方法。这样,当您点击第二个el-table-column中的数据时,就可以控制第一个el-table-column的展开或闭合状态了。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值