10

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

请帮忙。

这是我的标记:

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

2 回答 2

19

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

标记:

<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;
  }
}
于 2018-08-27T05:52:36.457 回答
0

我认为有更好的方法可以做到这一点我们在 el-table 中有行键和展开行键所以每次单击时,您都可以更改当前展开的行,即使您可以创建“expan-one-at-a”的行为-time" 喜欢::expand-row-keys="[currentExpandedRow]"

于 2022-03-06T03:20:48.060 回答