收藏
回答

三级菜单,第二列为多选,选中的内容没有高亮显示?

如图:选中了,但是颜色没有高亮,打印的数据也都有获取到。

<!--pages/relase/certificate/certificate.wxml-->
<view class="content">
    <view class="select-group">
        <view class="position-title">{{positionselect}}</view>
        <view class="position-number">
            <view class="count">6/</view>
            <view class="total">20</view>
        </view>
    </view>
    <view class="container">
        <!-- 证书类型 -->
        <scroll-view class="first-column" scroll-y scroll-with-animation>
            <view wx:for="{{grades}}" wx:key="id" class="first-item {{currentGrade.id === item.id ? 'greenColor':''}}" bindtap="selectGrade" data-item="{{item}}">
                <view class="first-float-carvit {{currentGrade.id === item.id ? 'greenBg':''}}"></view>
                <view class="first-float-title">{{item.name}}</view>
                <view class="first-float-count" wx:if="{{currentGrade.id === item.id}}">{{selectedStudents.length}}</view>
            </view>
        </scroll-view>
        <!-- 第二列证书名称 -->
        <scroll-view class="second-column" scroll-y scroll-with-animation>
            <view wx:for="{{classes}}" wx:key="id" class="second-item {{currentClass.id ? 'active':''}}" bindtap="selectClass" data-item="{{item}}" data-index="{{index}}">{{item.name}}</view>
        </scroll-view>
        <!-- 证书等级 -->
        <scroll-view class="third-column" scroll-y scroll-with-animation>
            <view wx:for="{{students}}" wx:key="id" class="second-item {{currentStudent.id === item.id ? 'active':''}}" bindtap="selectStudent" data-item="{{item}}">{{item.name}}</view>
        </scroll-view>
    </view>
    <view class="add-group" >
        <view class="add-title">已添加:</view>
        <scroll-view scroll-x="true" class="add-srcooll" show-scrollbar="{{false}}" enhanced="{{true}}" enable-flex>
            <view class="text-list" bindtap="removeBenefit" wx:for="{{selectedStudents}}" wx:key="name" data-catindex="{{item.catindex}}" data-subindex="{{item.subindex}}" data-posindex="{{item.posindex}}">
                <text class="text">{{item.name}}</text>
                <view class="close">×</view>
            </view>
        </scroll-view>
    </view>
    <view class="btn-group">
        <button bindtap="confirmSelection" type="primary" class="sunbmit-btn" disabled="{{selectedStudents.length === 0}}">确定(已选 <view class="position-number">
                <view class="count">{{selectedStudents.length}}/</view>
                <view class="total">5</view>
            </view>项) </button>
    </view>
</view>

Page({
    data: {
        positionselect"资格证书",
        list :certificateList,
        // 证书类型
        grades:[{id:1,name:'外语类'},{id:2,name:'英语类'},{id:3,name:'普通话类'},{id:4,name:'IT类'},{id:5,name:'生产制造类'},{id:6,name:'技工类'},{id:7,name:'人力行政类'},{id:8,name:'会计类'},{id:9,name:'审计类'},{id:10,name:'统计类'}],
        // 证书名称
        classData:{
            1:[{id:101,name:'日语等级考试'},
            {id:102,name:'日语专业四级'},
            {id:103,name:'日语专业八级'}],
            2:[{id:201,name:'大学英语四级'},{id:202,name:'大学英语六级'}],
            3:[{id:301,name:'普通话水平测试'}],
            4:[{id:401,name:'计算机等级考试'},{id:402,name:'计算机初级专业技术资格'}]},
        // 证书等级
    studentData:{
        101:[{id:10101,name:'日语N1'},{id:10102,name:'日语N2'}],
        102:[{id:10201,name:'日语专业四级'}],
        103:[{id:10301,name:'日语专业八级'}],
        120:[{id:12001,name:'DELF法语学习A1级文凭'},{id:12002,name:'DELF法语学习A2级文凭'}],
        121:[{id:12101,name:'CATTI法语一级口译'},{id:12102,name:'CATTI法语二级口译'}],
        122:[{id:12201,name:'俄语专业四级'}],
        123:[{id:12301,name:'俄语专业八级'}],
        124:[{id:12401,name:'TPKN对外俄语一级'},{id:12402,name:'TPKN对外俄语二级'}],
        
        201:[{id:20101,name:'大学英语四级'}],
        202:[{id:20201,name:'大学英语六级'}],
        203:[{id:20301,name:'英语专业四级'}],
        204:[{id:20401,name:'英语专业八级'}],
    
        301:[{id:30101,name:'普通话一级甲等'},{id:30102,name:'普通话一级乙等'}],
    
        401:[{id:40101,name:'计算机一级'},{id:40102,name:'计算机二级'},{id:40103,name:'计算机三级'}],
        402:[{id:40201,name:'程序员技术资格'},{id:40202,name:'网络管理员'},{id:40203,name:'信息系统运行管理员'},{id:40204,name:'网页制作员'},{id:40205,name:'信息处理技术员'},{id:40206,name:'多媒体应该制作技术员'},{id:40207,name:'电子商务技术员'}],
        403:[{id:40301,name:'软件评测师'},{id:40302,name:'软件设计师'},{id:40303,name:'软件过程能力评估师'},{id:40304,name:'网络工程师'},{id:40305,name:'多媒体应用设计师'},{id:40306,name:'嵌入式系统设计师'},{id:40307,name:'计算机辅助设计师'},{id:40308,name:'电子商务设计师'},{id:40309,name:'系统集成项目管理工程师'},{id:403010,name:'信息系统监理师'},{id:403011,name:'数据库系统工程师'},{id:403012,name:'信息系统管理工程师'},{id:403013,name:'信息安全工程师'},{id:403014,name:'计算机硬件工程师'},{id:403015,name:'信息技术支持工程师'}],},
        // 当前选中的证书类型,证书名称,证书等级
        currentGrade: {}, // 第一列当前选中的
        currentClass: {}, // 第二列当前选中的
        currentStudent: {}, // 第三列当前选中的
        // 当前显示的证书名称,证书等级列表
        classes: [],
        students: [],
        // 已选中的证书名称,证书等级
        selectedClasses: [],
        selectedStudents: [],
    },
    onLoadfunction (options{
        // 初始化默认选中证书类型,证书名称的证书等级
        const defaultGrade = this.data.grades[0];
        console.log(defaultGrade)
        const defaultClass = this.data.classData[defaultGrade.id][0];
        console.log(defaultClass)
        // const defaultStudent = this.data.studentData[defaultClass.id][0];
        this.setData({
            currentGrade: defaultGrade,
            // currentClass: defaultClass,
            // currentStudent: defaultStudent,
            classesthis.data.classData[defaultGrade.id],
            studentsthis.data.studentData[defaultClass.id]
        })
    },
    //选择证书类型
    selectGrade(e) {
        console.log(e)
        const grade = e.currentTarget.dataset.item;
        console.log(grade)
        const classes = this.data.classData[grade.id] || [];
        console.log(classes)
        this.setData({
            currentGrade: grade,
            classes: classes,
            // 重置证书名称的证书等级
            currentClass: {},
            currentStudent: {},
            students: []
        })
    },
    // 选择证书名称
    selectClass(e) {
    // 获取当前选中的证书名称
    let classItem = e.currentTarget.dataset.item;
    console.log(classItem); // 打印结果是当前选中项的值
    // 获取第三列的内容
    const students = this.data.studentData[classItem.id] || [];
    console.log(students); // 打印了该项目下的内容列表
    // 获取第二列的index
    const index = e.currentTarget.dataset.index;
    console.log(index); // 打印了indx的值
    // 确保 currentClass 是一个数组
    if (!Array.isArray(this.data.currentClass)) {
        this.data.currentClass = [];
    }
    let currentClass = this.data.currentClass.includes(classItem.id);
    console.log(currentClass); // 当没有选中时点击选中打印结果是false,有选中的内容再次点击选中的内容为true
    // 检查当前项是否已选中
    if (currentClass) {
        // 已选中,则取消选中
        currentClass = this.data.currentClass.filter(id => id !== classItem.id);
        console.log(currentClass);
    } else {
        // 未选中,则添加到选中列表
        currentClass = [...this.data.currentClass, classItem.id];
        console.log(currentClass); // 打印结果是,选中的id。比如选中了第一个,id:101
    }
    this.setData({
        currentClass: currentClass,
        students: students,
        currentStudent: {}
    });
},
    // 选择证书等级
    selectStudent(e) {
        console.log(e)
        const student = e.currentTarget.dataset.item;
        const selectedStudents = this.data.selectedStudents;
        const index = selectedStudents.findIndex(item => item.id === student.id);
        if (index === -1) {
            selectedStudents.push(student);
        } else {
            selectedStudents.splice(index, 1);
        }
        this.setData({
            currentStudent: student,
            selectedStudents: selectedStudents
        });
    },
    // 移除已添加的证书
    removeBenefit(e) {
        const index = e.currentTarget.dataset.index;
        const selectedStudents = this.data.selectedStudents;
        selectedStudents.splice(index, 1);
        this.setData({
            selectedStudents: selectedStudents
        });
    },
    // 确认选择
    confirmSelection() {
        // 在这里处理已选中的证书
        console.log('已选中的证书:'this.data.selectedStudents);
    },
})
回答关注问题邀请回答
收藏
登录 后发表内容