如何使表格行可点击并展开行 - vue.js - element-ui

Posted 2023-02-22

【中文标题】如何使表格行可点击并展开行 - vue.js - element-ui

【英文标题】：How to make a table row clickable and expand the row - vue.js - element-ui

【发布时间】：2019-02-01 14:55:07

【问题描述】：

我正在使用具有可扩展行功能的表格。单击展开图标时行展开，您可以查看示例HERE。但是，我想做的是，整行可点击并切换展开和折叠行，就像点击展开图标时一样。

请帮忙。

这是我的标记：

<template lang="pug">
  el-table(:data="tableData")
    el-table-column(label="Employee Name", prop="userName")
    el-table-column(label="Company Name", prop="companyName")
    el-table-column(type="expand", align="right" )
      template(slot-scope="props")
        p User Name:  props.row.userName 
        p Company Name:  props.row.companyName 
</template>

【参考方案1】：

好的，我想出了解决方案并回答了我自己的问题:)

标记：

<template lang="pug">
  el-table(:data="tableData", @row-click="rowClicked", ref="tableData").clickable-rows
    el-table-column(label="Employee Name", prop="userName")
    el-table-column(label="Company Name", prop="companyName")
    el-table-column(type="expand", align="right" )
      template(slot-scope="props")
        p User Name:  props.row.userName 
        p Company Name:  props.row.companyName 
</template>

脚本：

<script>
  export default 
    methods: 
      rowClicked(row) 
        this.$refs.tableData.toggleRowExpansion(row);
      
    
  
</script>

样式 - scss

// click-able rows
.clickable-rows 
  tbody tr td 
    cursor: pointer;
  

  .el-table__expanded-cell 
    cursor: default;