iview + Rado 实现tree单选功能

<template>
    <RadioGroup v-model="currValue">
        <Tree class="department-radio" :render="renderContent" :data="list" ></Tree>
    </RadioGroup>
</template>
<script>
  import{ Icon, Radio } from 'iview'
  export default {
    data() {
      return {
        currValue: '',
        list: [{title: '轿车轮胎销售部', type: 'dpt', expand: true, id: 12, children: [
            {title: '华东科', expand: false, id: 24, children: [{title: '上海', id: 143},{title: '台州温州', id: 124}]},
            {title: '北方科室', expand: false, id: 25, children: [{title: '渠道', id: 144},{title: '开放', id: 125}]}
        ]},]
      }
    },
    methods: {
        renderContent (h, { root, node, data }) {
            return(
                <div
                    onClick={() => { this.changeExpand(data) }}
                    class='tree-item ivu-tree-gather'>
                    <span class='left-info'>
                        <span class={['ivu-tree-title']}>
                            {data.children&&data.children.length ?
                             <span><Icon type="ios-folder" />{data.title}</span>:
                             <Radio  label={data.id} >{data.title}</Radio> }
                        </span>
                    </span>
                </div>
            ) 
        },
        changeExpand(data) {
            data.expand = !data.expand;
        },
    },
  }
</script>

预览