javascript - 使用Vue展开行时如何让元素直接出现

Question

我是 Vue 的新手，我正在尝试创建一个数据表，当您单击一行时，它会展开并显示图表。如果你能帮我解决这个问题，我有两个问题。当我单击一行时，什么也没有出现，但当我单击另一行时，图表出现在第一行中。第二个是我想一次只打开一行。

提前致谢!

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

Answer 1

我玩了一下 element-ui 并设法让它工作:

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>

请注意，操作内部存储状态肯定不推荐，也许不支持，但它有效:)