Home » vue » How can I get an element to appear directly when I expand a row using Vue

How can I get an element to appear directly when I expand a row using Vue

Posted by: admin November 26, 2021 Leave a comment

Questions:

I am an extreme beginner to Vue and am trying to to create a data table that when you click a row it expands and shows charts. With this I’m having two issues if you can help me out. When I click on a row nothing appears but then when I click on another one, graphs appear in the first. The second is that I would like to only have one row open at a time.

Thanks in advance!

<div class="right-side-table">
  <el-table :data="" style="width: 100%; max-height: 100%" element-loading-text="" highlight-current-row empty-text="N/A" @expand="handleRowExpansion">

    <el-table-column type="expand">
        <template scope="props">
            <p>#: {{ props.row.dateUTC }}</p>
            <p>#: {{ props.row.creator }}</p>
            <p>#: {{props.row.type }}</p>
            <p>#: {{ props.row.labels }}</p>
            <p>#: {{ props.row.uid }}</p>
            <canvas id="myChart4" width="300" height="300"></canvas>
            <canvas id="myChart6" width="300" height="300"></canvas>
            <canvas id="myChart5" width="300" height="300"></canvas>
                                    
                   
            <div>
                <el-button type="primary" @click="">Review</el-button>
            </div>
        </template>
    </el-table-column>
    <el-table-column prop="name" label="Name" sortable show-overflow-tooltip></el-table-column>
    <el-table-column prop="" label="" sortable show-overflow-tooltip></el-table-column>
    <el-table-column prop="" label="" sortable show-overflow-tooltip></el-table-column>
    <el-table-column prop="" label="" sortable show-overflow-tooltip></el-table-column>
    <el-table-column prop="" label="" sortable show-overflow-tooltip></el-table-column>
  </el-table>
</div>

Answers:

I played with element-ui for a little bit and managed to make it work:

new Vue({
  el: "#app",
  data() {
    return {
      tableData: [{
        key: 1,
        date: '2016-05-03',
        address: 'No. 189, Grove St, Los Angeles'
      }, {
        key: 2,
        date: '2016-05-02',
        address: 'No. 189, Grove St, Los Angeles'
      }, {
        key: 3,
        date: '2016-05-04',
        address: 'No. 189, Grove St, Los Angeles'
      }],
    }
  },

  methods: {
    expand(row, isExpanded) {
      this.$refs.tab.store.states.expandRows = isExpanded ? [row] : []
    }
  }
})
<script src="https://vuejs.org/js/vue.min.js"></script>

<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-default/index.css">
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>


<div id="app">
  <el-table ref="tab" :data="tableData" @expand="expand">
    <el-table-column type="expand">
      <template scope="props">
          <p>Address: {{ props.row.address}}</p>
        </template>
    </el-table-column>
    <el-table-column prop="date" label="Date"></el-table-column>
  </el-table>
</div>

Please mind though, that manipulating internal store state surely isn’t recommended and perhaps not supported, but it works 🙂