web-dev-qa-db-fra.com

Comment rendre une ligne de tableau cliquable et développer la ligne - vue.js - element-ui

J'utilise une table dotée d'une fonction de ligne extensible. La ligne se développe lorsque vous cliquez sur l'icône de développement, vous pouvez vérifier l'exemple ICI . Mais, ce que j'essaye de faire, c'est la ligne entière cliquable et basculer pour développer et réduire la ligne comme cela fonctionne lorsque vous cliquez sur l'icône de développement.

Veuillez aider.

Voici mon balisage:

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

D'accord, j'ai trouvé la solution et répondu à ma propre question :)

Balisage:

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

Scénario:

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

Style - scss

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

  .el-table__expanded-cell {
    cursor: default;
  }
}
6
Syed