ant-design-vue中自定義a-tree的打開與摺疊圖標

ant-design-vue中的價紹真的令人抽象，廢話不多說，介紹打開與摺疊圖標的應用。

<template>
  <a-tree
    v-model="checkedKeys"
    :treeData="treeData"
  >
    <template slot='switcherIcon'>
      <i @click='rotateWordTree($event)' style='background:black url("../../static/open.png") no-repeat;width:100%;height:100%;background-size: 100% 100%;'/>
      <!-- <a-icon type='dropbox' :selected="selected" aaa="111"/> -->
    </template>
  </a-tree>
</template>
<script>
  const treeData = [
    {
      title: '0-0',
      key: '0-0',
      children: [
        {
          title: '0-0-0',
          key: '0-0-0',
          children: [
            { title: '0-0-0-0', key: '0-0-0-0'},
            { title: '0-0-0-1', key: '0-0-0-1'},
            { title: '0-0-0-2', key: '0-0-0-2'},
          ],
        },
        {
          title: '0-0-1',
          key: '0-0-1',
          children: [
            { title: '0-0-1-0', key: '0-0-1-0'},
            { title: '0-0-1-1', key: '0-0-1-1'},
            { title: '0-0-1-2', key: '0-0-1-2'},
          ],
        },
        {
          title: '0-0-2',
          key: '0-0-2'
        },
      ],
    },
    {
      title: '0-1',
      key: '0-1',
      children: [
        { title: '0-1-0-0', key: '0-1-0-0'},
        { title: '0-1-0-1', key: '0-1-0-1'},
        { title: '0-1-0-2', key: '0-1-0-2'},
      ],
    },
    {
      title: '0-2',
      key: '0-2'
    },
  ];

  export default {
    data() {
      return {
        expandedKeys: ['0-0-0', '0-0-1'],
        autoExpandParent: true,
        checkedKeys: ['0-0-0'],
        selectedKeys: [],
        treeData,
      };
    },
    watch: {
      checkedKeys(val) {
        console.log('onCheck', val);
      },
    },
    methods: {
      rotateWordTree(e){
        let translateYFront = e.target.style.transform 
        if(translateYFront=='rotate(0deg)' && !translateYFront){
          e.target.style.transform = 'rotate(90deg)';
        }else{
          e.target.style.transform = 'rotate(0deg)';
        }
      }
    },
  };
</script>
<style scope>
</style>

以上代碼是添加自定義打開摺疊圖標，並且可以實現旋轉的效果，因爲自定義圖標沒有旋轉效果，所以只能通過點擊事件觸發。效果圖
在內網開發時，通過npm下載指定版本ant-design-vue的包，碰到過沒有switcherIcon這個屬性，可能包下的有問題.。查看node_module/ant-design-vue/type/tree/tree.ts的文件下是否定義了switcherIcon，沒有定義通過不指定版本下載發現可行，應該可以通過修改源碼來實現這個錯誤。

只是一個demo有點醜陋，如果替換圖標有其它邏輯，比如事先部分展開，全部展開等，具體問題需要具體分析才行。
這個a-tree有個巨坑就是每次添加slot與slot-scope需要在數據裏面添加相應的slots與scopeSlots，這個要求真的巨坑，前端還要遍歷數據添加這些字段？或者後端需要專門添加這些字段？坑坑的，目前沒發現其它辦法。有辦法會來繼續分享。