如何使表格行可以点击并展开行 - Vue.js - Element-UI

Question

我正在使用带有可扩展行功能的表格。当单击展开图标时，行会展开，您可以在这里查看示例。但是，我想要的是使整行都可点击，并像单击展开图标时那样切换展开和折叠行。

请帮忙。

这是我的标记：

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

- Syed

Answer 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;
  }
}

- Syed

Answer 2

我认为有更好的方法来做到这一点。我们在 el-table 中有行键和 expand-row-keys，所以每次点击时你可以改变当前扩展的行，甚至可以创建“一次只展开一个”的行为。例如：:expand-row-keys="[currentExpandedRow]"。

- Adham Muhammadjonov

---

你的回答目前表达不清楚。请编辑并添加更多细节，以帮助他人理解如何回答所提出的问题。你可以在帮助中心找到关于如何撰写好回答的更多信息。 - Community