表格內的列顯示為樹狀結構，可展開/收縮 >[info] 顯示效果  >[info] 示例代碼 ``` <template> <div class="page-container"> <!--表格樹內容欄--> <el-table :data="goodsCatTreeData" element-loading-text="$t('action.loading')" size="mini" stripe style="width: 100%;" v-loading="loading"> <table-tree-column @sendTreeData="getTreeData" label="名稱" minWidth="280" prop="name" treeKey="id"></table-tree-column> </el-table> </div> </template> <script> import tableTreeColumn from '@/components/core/table_tree_column' export default { components: { tableTreeColumn }, data () { return { loading: false, goodsCatTreeData: [] } }, watch: { goodsCatTreeData: { // 深度監聽，可監聽到對象、數組的變化 handler (val, oldVal) { console.log(`goodsCatTreeData變化: ${oldVal ? oldVal.length : 0} -> ${val ? val.length : 0}`)// 但是這兩個值打印出來卻都是一樣的 }, deep: true } }, methods: { getTreeData (data) { if (data) { this.goodsCatTreeData = data } else { console.log('data 這空值') } }, } } </script> ``` >[info] 事件說明 ``` sendTreeData：事件回調，參數：data ```