ElementUI樹形表格默認展開


ElementUI樹形表格默認展開,通過expand-row-keys設置默認展開行。

我們在使用element的Table表格來編寫樹形表格時,官方提示需要除了正常配置外 row-key 樹形是必須的

image-20200911155311873

官方給的例子

image-20200911155437699

配置了上面的這個屬性后我們就可以使用 expand-row-keys 來配置默認展開的key

image-20200911155626945

對應 expand-row-keys 的配置,官方也沒有給出例子,於是我就自己配置了一下

<el-table
    ref="table"
    v-loading="listLoading"
    element-loading-text="數據拼命加載中"
    highlight-current-row
    row-key="id"
    style="width: 100%;margin-bottom: 20px;"
    :data="tableData"
          
    :expand-row-keys="[1,2,3]"
          
    :tree-props="{children: 'children', hasChildren: 'hasChildren0'}"
    @row-dblclick="handleRowDbClick"
    @expand-change="handleExpandChange"
>

然后發現並沒有作用。

說下我為什么會這樣設置,

因為數據的記錄id是數字,所以在設置時我就理所應當的設置了對應記錄的id進去。

然后就一度懷疑人生,最后我改成這樣就可了

<el-table
    ref="table"
    v-loading="listLoading"
    element-loading-text="數據拼命加載中"
    highlight-current-row
    row-key="id"
    style="width: 100%;margin-bottom: 20px;"
    :data="tableData"
          
    :expand-row-keys="['1','2','3']"
          
    :tree-props="{children: 'children', hasChildren: 'hasChildren0'}"
    @row-dblclick="handleRowDbClick"
    @expand-change="handleExpandChange"
>

把數組里面的元素改成字符串就可以了 ???


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM