tree结构数据单选示例

1、tree结构数据单选示例

1、首先处理接口请求到的数据

import { getTestTypeAPI } from '@/api/questions/set'

import { formatSortQue } from '@/utils/format'

format.js文件中：

export function formatSortQue(arr) {
    let formatArr = []

    function formatFun(arr) {
        arr.forEach(item => {
            formatArr.push({ code: item.code, label: item.name })
            if (item.list.length > 0) {
                formatFun(item.list)
            }
        })
    }
    formatFun(arr)
    return formatArr
}

应用页面.vue文件中：

getSortList() {//分类列表
    getClassListAPI({code:'01',bankId:this.bankId}).then(res => {
        if(res.data.code === 0){
            this.sortList = res.data.data[0].list
            this.options = formatSortQue(this.sortList)
		    this.sortList.unshift({name:'默认分类',code:'',id:null})
        } else {
            this.$message.error('获取数据失败');
        }
    })
},

2、将数据处理成tree结构

data() {
	return {
		typeName: null,
		defaultProps: {
            children: 'list',
            label: 'name'
        },
        sortList: [],
		options: [],
	}
},

加上接口数据处理方式：

getSortList() {//分类列表
    getClassListAPI({code:'01',bankId:this.bankId}).then(res => {
        if(res.data.code === 0){
            this.sortList = res.data.data[0].list
            
            //将数据处理成层级选择下拉样式
            this.options = formatSortQue(this.sortList)
		    this.sortList.unshift({name:'默认分类',code:'',id:null})
        } else {
            this.$message.error('获取数据失败');
        }
    })
},

3、页面布局，层级展示tree数据，与select标签结合，下拉选择数据

<el-form-item label="试题分类：" style="display:inline-block">
	<el-popover popper-class="category-popover" placement="bottom-start" trigger="click" ref="popover">
		<el-tree :data="sortList" node-key="code" :props="defaultProps"
			:highlight-current="true" :expand-on-click-node="false"
			:current-node-key="typeName" @node-click="handleNodeClick"
			style=" max-height: 400px; overflow-y: auto; width:380px;"></el-tree>
		<el-select v-model="typeName" style="width:400px" popper-class="hidden-selection" slot="reference">
			<el-option :value="null" label="默认分类"></el-option>
			<el-option v-for="item in options" :key="item.code" :label="item.label" :value="item.code"></el-option>
		</el-select>
	</el-popover>
</el-form-item>

4、选择事件，控制传值与关闭下拉弹窗

handleNodeClick(data) {//点击分类--搜索
    //数据选择后，向后台传值
    this.typeName = data.name
	this.dataForm.diyTypeCode = data.code
	this.dataForm.diyTypeId = data.id
	
	//数据选择后关闭选择下拉弹窗，以保证只能每次选一条数据，即单选功能
    this.$refs.popover.doClose()
},

5、若是编辑页面，需要返显选中的分类，则在访问数据详情时，对select的v-model进行赋值即可

getDet() {// 获取试题详情
	getTestDetailsAPI(this.testEditId).then(res => {
		if(res.data.code === 0) {
			let data = res.data.data
			this.dataForm = data
			this.dataForm.content = data.content
			
			//对typeName进行赋值，保持数据统一，即可返显分类数据
			this.typeName = data.diyTypeCode
			
		} else {
			this.$message.error('获取数据失败')
		}
	})
},