vue实现多选、全选功能_vue 自定义多选框实现多选、全选功能,以及使用css实现选中打钩效果-优快云博客

本文介绍了一款用于前端页面的多选组件设计思路与实现细节，包括全选、取消全选及单项选择功能。组件通过Vue.js框架实现，利用v-if、v-else和v-for指令进行动态渲染，并通过自定义事件处理函数实现多选逻辑。

<!-- template -->
<span class="title" v-if="clickAll" @click="clearCheck">取消</span>
<span class="title" v-else @click="checkAll">全选</span>
<div class="one-item" v-for="(item, index) in List" :key="index" >
     <div class="item-r" ref="liId">
          <span class="date">{{item.time}}</span>    <!-- 时间 -->
          <span class="image-item">{{item.name}}</span>    <!-- 项目名字 -->
     </div>
     <button @click="choosed(index)">
           <img v-if="checkBox.includes(index)" class="select" src="###" alt="已选择图标">
           <div v-else class="no-select" src="" alt="待选择图标"></div>
      </button>
</div>

<!-- 样式忽略 -->

<script>
export default {
    name: '',
    data() {
        return {
            List: [
                {time: '', name: '',}
            ],    // 选项集合
            checkBox: [],    // 选中的内容
            clickAll: false,    // 是否全选
        }
    },
    methods: {
        // 多选
        async choosed(index) {
            var idx = this.checkBox.indexOf(index);
            if(this.$refs.liId[index].className == 'item-r') {
                // 添加类--选中状态
                this.$refs.liId[index].className = 'item-r choose';
                this.checkBox.push(index);
            } else {
                // 选中再取消
                this.$refs.liId[index].className = 'item-r';
                this.checkBox.splice(idx, 1);
            }
      
            
        },
        //全选       
        async checkAll() {
            var len = this.imageList.length;
            this.checkBox = [];
            for (var i = 0; i < len; i++) {
                this.checkBox.push(i);
            }
            this.clickAll=true;
        },
        // 取消全选       
        async clearCheck() {
            this.checkBox = [];
            this.clickAll = false;
        },   
    
    }
}
</script>