Vueを使用して行を展開すると、要素を直接表示する方法

Question

Vueの初心者です。行をクリックするとグラフが展開されてグラフが表示されるデータテーブルを作成しようとしています。あなたが私を助けることができるなら、これで私は2つの問題を抱えています。行をクリックすると何も表示されませんが、別のグラフをクリックするとグラフが最初に表示されます。 2つ目は、一度に1つの行しか開いていないことです。

ありがとうございます！

<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

私は少しのための要素-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>

内部を操作していること、しかし気にしてくださいストア状態は必ずしも推奨されておらず、おそらくサポートされていませんが、動作します:)