欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

el-tree的實(shí)現(xiàn)葉子節(jié)點(diǎn)單選的示例代碼

 更新時(shí)間：2022年08月18日 10:49:00   作者：吳明_yst  
本文主要介紹了el-tree的實(shí)現(xiàn)葉子節(jié)點(diǎn)單選的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

效果

要求：火車的【硬座】和【軟臥】只有選擇一個(gè)。

實(shí)現(xiàn)效果：【上半年度出行】和【下半年度出行】的火車等級(jí)每個(gè)只能選擇一項(xiàng)。

1、首先查看官網(wǎng)

進(jìn)入Element官網(wǎng)查看

選擇案例并粘貼到本地IDE中。

源碼放到文末

2、熟悉基本的代碼

<el-tree
      :data="data"
      show-checkbox
      default-expand-all
      node-key="value"
      ref="tree"
      empty-text="no data"
      :check-on-click-node="true"
      highlight-current
      @check="changeTree"
      :props="defaultProps">
</el-tree>        
data() {
   return {
     data: [...],
     // 設(shè)置每個(gè)節(jié)點(diǎn)的屬性
     defaultProps: {
       children: 'children',
       label: 'label',
       id: 'value',
       disabled: 'selectable'
     }
   };
},

2.1、參數(shù)說明：defaultProps

  • children： 設(shè)置子節(jié)點(diǎn)的數(shù)組名稱
  • label： 樹節(jié)點(diǎn)顯示名稱
  • id: 樹節(jié)點(diǎn)的ID (不可以重復(fù))
  • disabled: 是否可以被選中

2.2、對(duì)應(yīng)的數(shù)據(jù)結(jié)構(gòu)

data() {
    return {
      data: [{
        value: '001',
        label: '上半年度出行',
        selectable: 'false',
        children: [{}]
      },{
        value: '002',
        label: '下半年出行',
        selectable: 'false', // 注意這里是字符串，'false'
        children: [{
          value: '002-101',
          label: '火車',
          selectable: 'false',
          children: [{}]
        }]
      }],
      // 設(shè)置每個(gè)節(jié)點(diǎn)的屬性
      defaultProps: {
        children: 'children',
        label: 'label',
        id: 'value',
        disabled: 'selectable'
      }
    };

2.3、為什么要使用disabled屬性呢？

思路：三層數(shù)據(jù)數(shù)據(jù)，葉子節(jié)點(diǎn)實(shí)現(xiàn)單選，但是如果點(diǎn)擊父節(jié)點(diǎn)時(shí)，會(huì)實(shí)現(xiàn)葉子節(jié)點(diǎn)的全選，需要進(jìn)行更多的數(shù)據(jù)處理。因此為了解決這個(gè)麻煩。引入disabled屬性，讓第一級(jí)和第二級(jí)為不可選中，只有葉子節(jié)點(diǎn)可以點(diǎn)擊選中，這樣來減少數(shù)據(jù)的判斷。

實(shí)現(xiàn)效果：

3、添加check事件，實(shí)現(xiàn)單選。

每次點(diǎn)擊樹節(jié)點(diǎn)選框，出發(fā)check事件changeTree。此時(shí)存在兩種情況，情況一：點(diǎn)擊選中；情況二：點(diǎn)擊取消。
情況一： 點(diǎn)擊選中

// 處理選擇數(shù)據(jù)
    changeTree(data, list){
      console.log(data);   // {value: '002-101-301', label: '硬座'}
      console.log(list);   // {checkedKeys: ['002-101-301']}
      // 1、判斷是選中/取消選中操作 checked: -1表示取消選中，否則為選中
      let checkedKeys = list.checkedKeys;
      console.log(checkedKeys)  // ['002-101-301']
      let checked = checkedKeys.indexOf(data.value);  // data.value  : 002-101-301
      console.log(checked);  // 0    ps: 返回-1時(shí)，表示數(shù)組不存在某個(gè)元素
      // 2、選中則判斷
      if(checked !== -1){
        let prefix = data.value.substring(0, 8);  // '002-101-' 截取父節(jié)點(diǎn)的ID
        let list = checkedKeys.filter( item => {
          // 根據(jù)父節(jié)點(diǎn)的ID判斷，這個(gè)節(jié)點(diǎn)下有多少個(gè)子節(jié)點(diǎn); item.length < 8: 刪除所有的父節(jié)點(diǎn)
          return item.indexOf(prefix) !== -1 || item.length < 8;
        });
        console.log(list); // ['002-101-301']
        // 如果一個(gè)父節(jié)點(diǎn)下選中多個(gè)子節(jié)點(diǎn)，刪除子節(jié)點(diǎn)并重新賦值。
        if(list.length !== 1){ // 
          list.forEach(item => {
            let index = checkedKeys.indexOf(item);
            checkedKeys.splice(index, 1);
          });
          checkedKeys.push(data.value)
        }
        // 結(jié)果
        console.log(checkedKeys); // ['002-101-301']
        // 重復(fù)賦值
        this.$refs.tree.setCheckedKeys(checkedKeys);
      }
    },

**情況二：**單選切換

// 處理選擇數(shù)據(jù)
    changeTree(data, list){
      // {value: '002-101-302', label: '硬座'}
      console.log(data);
       // {checkedKeys: ['002', '002-101', '002-101-301','002-101-302']}
      console.log(list);  
      // 1、判斷是選中/取消選中操作 checked: -1表示取消選中，否則為選中
      let checkedKeys = list.checkedKeys;
      // ['002', '002-101', '002-101-301','002-101-302']
      console.log(checkedKeys)
      let checked = checkedKeys.indexOf(data.value);
      console.log(checked);  // 3    ps: 返回-1時(shí)，表示數(shù)組不存在某個(gè)元素
      // 2、選中則判斷
      if(checked !== -1){
        let prefix = data.value.substring(0, 8);  // '002-101-' 截取父節(jié)點(diǎn)的ID
        let list = checkedKeys.filter( item => {
          // 根據(jù)父節(jié)點(diǎn)的ID判斷，這個(gè)節(jié)點(diǎn)下有多少個(gè)子節(jié)點(diǎn); item.length < 8: 刪除所有的父節(jié)點(diǎn)
          return item.indexOf(prefix) !== -1 || item.length < 8;
        });
        // ['002', '002-101', '002-101-301','002-101-302']
        console.log(list);
        // 如果一個(gè)父節(jié)點(diǎn)下選中多個(gè)子節(jié)點(diǎn)，刪除子節(jié)點(diǎn)并重新賦值。
        if(list.length !== 1){ 
         // 由于當(dāng)前為選中操作，所以需要先刪除當(dāng)前節(jié)點(diǎn)下所有選中的子節(jié)點(diǎn)。
          list.forEach(item => {
            let index = checkedKeys.indexOf(item);
            checkedKeys.splice(index, 1);
          });
          // 此時(shí)處理完后，checkedKeys：[]
          // 添加本地選中的數(shù)據(jù)
          // ['002-101-302']
          checkedKeys.push(data.value)
        }
        // 結(jié)果 ['002-101-302']
        console.log(checkedKeys);
        // 重復(fù)賦值
        this.$refs.tree.setCheckedKeys(checkedKeys);
      }
    },

情況三： 點(diǎn)擊取消

// 處理選擇數(shù)據(jù)
    changeTree(data, list){
      console.log(data);   // {value: '002-101-302', label: '硬座'}
      console.log(list);   // {checkedKeys: []}
      // 1、判斷是選中/取消選中操作 checked: -1表示取消選中，否則為選中
      let checkedKeys = list.checkedKeys;
      console.log(checkedKeys)  // []
      let checked = checkedKeys.indexOf(data.value);  // data.value  : 002-101-301
      console.log(checked);  // -1    ps: 返回-1時(shí)，表示數(shù)組不存在某個(gè)元素,此時(shí)直接結(jié)束方法
      // 2、選中則判斷
      if(checked !== -1){
        let prefix = data.value.substring(0, 8);  // '002-101-' 截取父節(jié)點(diǎn)的ID
        let list = checkedKeys.filter( item => {
          // 根據(jù)父節(jié)點(diǎn)的ID判斷，這個(gè)節(jié)點(diǎn)下有多少個(gè)子節(jié)點(diǎn); item.length < 8: 刪除所有的父節(jié)點(diǎn)
          return item.indexOf(prefix) !== -1 || item.length < 8;
        });
        console.log(list); // ['002-101-301']
        // 如果一個(gè)父節(jié)點(diǎn)下選中多個(gè)子節(jié)點(diǎn)，刪除子節(jié)點(diǎn)并重新賦值。
        if(list.length !== 1){ // 
          list.forEach(item => {
            let index = checkedKeys.indexOf(item);
            checkedKeys.splice(index, 1);
          });
          checkedKeys.push(data.value)
        }
        // 結(jié)果
        console.log(checkedKeys);
        // 重復(fù)賦值
        this.$refs.tree.setCheckedKeys(checkedKeys);
      }
    },

情況四： 分別選中上半年和下半年各選一個(gè)

// 處理選擇數(shù)據(jù)
// 打印結(jié)果在上圖，可以對(duì)照著看。
    changeTree(data, list){
      console.log(data);
      console.log(list);
      // 1、判斷是選中/取消選中操作 checked: -1表示取消選中，否則為選中
      let checkedKeys = list.checkedKeys;
      console.log(checkedKeys)  // []
      let checked = checkedKeys.indexOf(data.value);
      console.log(checked);  // -1    ps: 返回-1時(shí)，表示數(shù)組不存在某個(gè)元素,此時(shí)直接結(jié)束方法
      // 2、選中則判斷
      if(checked !== -1){
        let prefix = data.value.substring(0, 8);
        let list = checkedKeys.filter( item => {
          // 根據(jù)父節(jié)點(diǎn)的ID判斷，這個(gè)節(jié)點(diǎn)下有多少個(gè)子節(jié)點(diǎn); item.length < 8: 刪除所有的父節(jié)點(diǎn)
          return item.indexOf(prefix) !== -1 || item.length < 8;
        });
        console.log(list); 
        // 如果一個(gè)父節(jié)點(diǎn)下選中多個(gè)子節(jié)點(diǎn)，刪除子節(jié)點(diǎn)并重新賦值。
        if(list.length !== 1){ // 
          list.forEach(item => {
            let index = checkedKeys.indexOf(item);
            checkedKeys.splice(index, 1);
          });
          checkedKeys.push(data.value)
        }
        // 結(jié)果
        console.log(checkedKeys);
        // 重復(fù)賦值
        this.$refs.tree.setCheckedKeys(checkedKeys);
      }
    },

至此簡單的多葉子節(jié)點(diǎn)實(shí)現(xiàn)單元就完成了。

完整源碼

<template>
  <div class="home">
    <el-row :gutter="60" style="background-color: wheat">
        <el-col :span="8"></el-col>
        <el-col :span="8">
          <div style="margin: 30px;">
            <el-tree
                :data="data"
                show-checkbox
                default-expand-all
                node-key="value"
                ref="tree"
                empty-text="no data"
                :check-on-click-node="true"
                highlight-current
                @check="changeTree"
                :props="defaultProps">
            </el-tree>

            <div class="buttons" style="margin-top: 30px;">
              <el-button @click="getCheckedNodes">通過 node 獲取</el-button>
              <el-button @click="getCheckedKeys">通過 key 獲取</el-button>
              <el-button @click="setCheckedNodes">通過 node 設(shè)置</el-button>
              <br>
              <el-button @click="setCheckedKeys">通過 key 設(shè)置</el-button>
              <el-button @click="resetChecked">清空</el-button>
            </div>
          </div>
        </el-col>
      </el-row>
  </div>
</template>
<script>
export default {
  name: "home",
  data() {
    return {
      data: [{
        value: '001',
        label: '上半年度出行',
        selectable: 'false',
        children: [{
          value: '001-101',
          label: '火車',
          selectable: 'false',
          children: [{
            value: '001-101-301',
            label: '硬座'
          }, {
            value: '001-101-302',
            label: '軟臥'
          }]
        }]
      },{
        value: '002',
        label: '下半年出行',
        selectable: 'false',
        children: [{
          value: '002-101',
          label: '火車',
          selectable: 'false',
          children: [{
            value: '002-101-301',
            label: '硬座'
          }, {
            value: '002-101-302',
            label: '軟臥'
          }]
        }]
      }],
      // 設(shè)置每個(gè)節(jié)點(diǎn)的屬性
      defaultProps: {
        children: 'children',
        label: 'label',
        id: 'value',
        disabled: 'selectable'
      }
    };
  },
  mounted() {

  },
  methods: {
    // 處理選擇數(shù)據(jù)
    changeTree(data, list){
      // 1、判斷是選中/取消選中操作 checked: -1表示取消選中，否則為選中
      let checkedKeys = list.checkedKeys;
      console.log(checkedKeys)
      let checked = checkedKeys.indexOf(data.id);
      // 2、選中則判斷
      if(checked !== -1){
        let prefix = data.id.substring(0, 8);
        let list = checkedKeys.filter( item => {

          return item.indexOf(prefix) !== -1 || item.length < 8;
        });
        console.log(list);
        // 如果一個(gè)父節(jié)點(diǎn)下選中多個(gè)子節(jié)點(diǎn)，刪除子節(jié)點(diǎn)并重新賦值。
        if(list.length !== 1){
          list.forEach(item => {
            let index = checkedKeys.indexOf(item);
            checkedKeys.splice(index, 1);
          });
          checkedKeys.push(data.id)
        }
        // 結(jié)果
        console.log(checkedKeys);
        this.$refs.tree.setCheckedKeys(checkedKeys);
      }

    },
    getCheckedNodes() {
      console.log(this.$refs.tree.getCheckedNodes());
      console.log(this.$refs.tree.getCheckedNodes()[0].id);
      console.log(this.$refs.tree.getCheckedNodes()[0].label);
    },
    getCheckedKeys() {
      console.log(this.$refs.tree.getCheckedKeys());
    },
    setCheckedNodes() {
      this.$refs.tree.setCheckedNodes([{
        id: 5,
        label: '二級(jí) 2-1'
      }, {
        id: 9,
        label: '三級(jí) 1-1-1'
      }]);
    },
    setCheckedKeys() {
      this.$refs.tree.setCheckedKeys([3]);
    },
    resetChecked() {
      this.$refs.tree.setCheckedKeys([]);
    }
  },
}
</script>

<style scoped>

</style>

到此這篇關(guān)于el-tree的實(shí)現(xiàn)葉子節(jié)點(diǎn)單選的示例代碼的文章就介紹到這了,更多相關(guān)el-tree 葉子節(jié)點(diǎn)單選內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

  • vue項(xiàng)目記錄鎖定和解鎖功能實(shí)現(xiàn)

    vue項(xiàng)目記錄鎖定和解鎖功能實(shí)現(xiàn)

    這篇文章主要為大家詳細(xì)介紹了vue項(xiàng)目記錄鎖定和解鎖功能實(shí)現(xiàn)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
    2022-03-03
  • 詳解vue-router傳參的兩種方式

    詳解vue-router傳參的兩種方式

    Vue Router 是 Vue.js 官方的路由管理器。這篇文章主要介紹了詳解vue-router傳參的兩種方式,需要的朋友可以參考下
    2018-09-09
  • Vue獲取DOM的幾種方法總結(jié)

    Vue獲取DOM的幾種方法總結(jié)

    這篇文章主要介紹了Vue獲取DOM的幾種方法總結(jié)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
    2022-10-10
  • vue中前端代理跨域問題實(shí)例總結(jié)

    vue中前端代理跨域問題實(shí)例總結(jié)

    前后端分離進(jìn)行項(xiàng)目開發(fā),跨域問題不可避免,下面這篇文章主要給大家介紹了關(guān)于vue中前端代理跨域問題的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下
    2022-04-04
  • vue項(xiàng)目兼容ie11的實(shí)現(xiàn)方法

    vue項(xiàng)目兼容ie11的實(shí)現(xiàn)方法

    本文主要介紹了vue項(xiàng)目兼容ie11的實(shí)現(xiàn)方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2022-08-08
  • vue常用高階函數(shù)及綜合實(shí)例

    vue常用高階函數(shù)及綜合實(shí)例

    這篇文章主要介紹了vue常用高階函數(shù)及綜合案例，文章內(nèi)容講解的很清晰，有對(duì)于這方面感興趣的同學(xué)可以研究下
    2021-02-02
  • Vue全局自定義指令Modal拖拽的實(shí)踐

    Vue全局自定義指令Modal拖拽的實(shí)踐

    最近一直在做的項(xiàng)目是Vue2搭建的項(xiàng)目，本文主要介紹了Vue全局自定義指令Modal拖拽的實(shí)踐，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
    2021-09-09
  • vue3中reactive不能直接賦值的解決方案

    vue3中reactive不能直接賦值的解決方案

    這篇文章主要介紹了vue3中reactive不能直接賦值的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
    2022-05-05
  • Vue?Router嵌套路由(children)的用法小結(jié)

    Vue?Router嵌套路由(children)的用法小結(jié)

    嵌套路由就是父路由里面嵌套他的子路由，父路由有自己的路由導(dǎo)航和路由容器（router-link、router-view），通過配置children可實(shí)現(xiàn)多層嵌套，這篇文章主要介紹了Vue--Router--嵌套路由(children)的用法,需要的朋友可以參考下
    2022-08-08
  • vue loadmore 組件滑動(dòng)加載更多源碼解析

    vue loadmore 組件滑動(dòng)加載更多源碼解析

    這篇文章主要介紹了vue loadmore 組件滑動(dòng)加載更多源碼解析,需要的朋友可以參考下
    2017-07-07

最新評(píng)論