Element-UI 的樹列表實現單選


1. Element-UI 的 el-tree 組件當設置了 show-checkbox 屬性以后,默認是只能多選的,如果我們想要將其改選為單選,就要進行一些特殊的處理,首先看效果圖。

2. 組件代碼(只列出el-tree組件相關的代碼)

...
<el-tree
  class="filter-tree"
  :data="temp3Msg.currentCourseList"
  :props="defaultProps"
  default-expand-all
  node-key="id" 
  :filter-node-method="filterNode"
  show-checkbox
  ref="tree3"
  @check-change="handleCheckChange"
  >
</el-tree>
...

3. 處理 handleCheckChange 事件

handleCheckChange (data, checked, indeterminate) {
  /* 主要通過checked進行判斷 */
  if (checked) {
    let arr = [data.id];
    this.$refs.tree3.setCheckedKeys(arr);
    /* 右側列表相關的代碼 */
    /* this.temp3Msg.currentSelectCourseList = []; */
    /* this.temp3Msg.currentSelectCourseList.push(data); */
  }
},


免責聲明!

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



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