Element UI table 非同步載入，使用其他方式觸發

在官方文件中，table 要實現非同步載入下一級的資料，只能點選左側的箭頭觸發

那麼，如何讓點選表單內容，也可以觸發載入呢？比如說點選 “2016-05-01” 也可以載入下級資料

在 <el-table></el-table> 這個元件上，加上一個 ref, 然後給第一列的欄位，加上一個自定義的插槽，並設定點選事件 toggle_child，程式碼如下：

<el-table ref="table">
    <el-table-column
                prop="date"
                label="日期"
   >
       <template slot-scope="scope">
            <span @click="toggle_child(scope.row)">{{ scope.row.date }}                    </span>
       </template>
   </el-table-column>
   <!-- ... -->
</el-table>

然後在 js 程式碼中，宣告這個方法

export default {
    // ...
    methods:{
        // ...
        toggle_child(row){
            this.$refs['table'].store.loadOrToggle(row);
        }
    }
}

好了，這樣做就可以實現了

本作品採用《CC 協議》，轉載必須註明作者和本文連結