web-dev-qa-db-ja.com

テーブル行をクリック可能にして行を展開する方法-vue.js-element-ui

拡張可能な行機能を持つテーブルを使用しています。展開アイコンをクリックすると、行が展開されます。例 [〜＃〜]こちら[〜＃〜] を確認できます。しかし、私が作ろうとしているのは、行全体をクリック可能で、展開アイコンがクリックされたときと同じように行の展開と折りたたみを切り替えます。

助けてください。

これが私のマークアップです：

<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>
javascriptvue.jselement-ui
7
Syed

さて、私は解決策を見つけて自分の質問に答えました:)

マークアップ：

<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;
  }
}
6
Syed