[Vuejs]-How can I get an element to appear directly when I expand a row using Vue

by

2👍

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 🙂

👤damienix

Leave a comment