我怎样才能得到，当我使用扩展的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

我打元素的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>

请记住，虽然，即操纵内部商店状态肯定是不推荐，也许不支持，但它的工作原理:)