Vue的全选和选中

最新推荐文章于 2023-08-04 17:05:20 发布
最新推荐文章于 2023-08-04 17:05:20 发布
阅读量336 收藏
点赞数
分类专栏： Vue
原文链接：https://blog.csdn.net/cofecode/article/details/79159827
版权
  1. 第一种
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        table,
        td,
        th {
            border: 1px solid #ebebeb;
            border-collapse: collapse;
            text-align: center;
        }

        table {
            width: 500px;
        }
    </style>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>

<body>
    <div class="app">
        <table>
            <thead>
                <tr>
                    <th style="line-height: 38px">选中数
                        {{checkedCount}}<input type="checkbox" v-model="allchecked"
                            style="zoom:200%;vertical-align: middle">
                    </th>
                    <th>name</th>
                    <th>age</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="item in list">
                    <td><input type="checkbox" v-model="item.checked" style="zoom:200%"></td>
                    <td>{{item.name}}</td>
                    <td>{{item.age}}</td>
                </tr>
            </tbody>
        </table>
    </div>
    <script>
        var list = [
            {
                name: '小明',
                age: 23,
                checked: false
            },
            {
                name: '小红',
                age: 2,
                checked: true
            },
            {
                name: '小蓝',
                age: 23,
                checked: true
            },
            {
                name: '小bai',
                age: 40,
                checked: true
            },
            {
                name: '王小二',
                age: 18,
                checked: false
            }
        ]
        new Vue({
            el: '.app',
            data: {
                list
            },
            computed: {
                allchecked: {
                    // getter
                    get: function () {
                        return this.list.length == this.checkedCount//长度==选中数
                    },
                    // setter
                    set: function (val) {
                        //val就是点击之后，全选按钮的v-model值（状态）,勾上后就是val的值就是true。未勾上就是false
                        console.log(val)
                        this.list.forEach(item => {
                            item.checked = val
                        })
                    }
                },
                checkedCount: {
                    // getter
                    get: function () {
                        var i = 0
                        this.list.forEach(item => {
                            if (item.checked === true) i++
                        })
                        return i
                    }
                }
            }
        })
    </script>
</body>

</html>

2.第二种

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        table,
        td,
        th {
            border: 1px solid #ebebeb;
            border-collapse: collapse;
            text-align: center;
        }

        table {
            width: 500px;
        }
    </style>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>

<body>
    <div class="app">
        <table>
            <thead>
                <tr>
                    <th style="line-height: 38px">全选
                        <input type="checkbox" v-model="allchecked" @click="changeState(allchecked)"
                            style="zoom:200%;vertical-align: middle">
                    </th>
                    <th>name</th>
                    <th>age</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="item in list">
                    <td><input type="checkbox" v-model="item.checked" style="zoom:200%"></td>
                    <td>{{item.name}}</td>
                    <td>{{item.age}}</td>
                </tr>
            </tbody>
        </table>
    </div>
    <script>
        var list = [
            {
                name: '小明',
                age: 23,
                checked: false
            },
            {
                name: '小红',
                age: 2,
                checked: true
            },
            {
                name: '小蓝',
                age: 23,
                checked: true
            },
            {
                name: '小bai',
                age: 40,
                checked: true
            },
            {
                name: '王小二',
                age: 18,
                checked: false
            }
        ]
        new Vue({
            el: '.app',
            data: {
                list,
                allchecked: false
            },
            methods: {
                changeState(val) {
                    this.list.forEach(item => {
                        if (val === false) {
                            item.checked = true
                        } else {
                            item.checked = false
                        }
                    })
                }
            },
            watch: {
                list: {
                    handler(val) {
                        console.log('watch数组的变化', val)
                        var i = 0
                        this.list.forEach(item => {
                            if (item.checked === true) i++
                        })
                        if (i === this.list.length) {
                            this.allchecked = true
                        } else {
                            this.allchecked = false
                        }
                    },
                    deep: true
                }
            }
        })
    </script>
</body>

</html>

————————————————
原文链接：https://blog.csdn.net/cofecode/article/details/79159827

wwww....
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue.js全选单选删除选中特效代码
03-20
通过以上步骤，我们可以实现一个具有全选、单选和删除选中项功能的Vue.js组件。这个组件的核心在于数据模型的维护、事件监听和计算属性的使用，使得在用户交互时，列表能够实时反映出用户的操作状态。而`jiaoben6189...
vue 实现框选选中效果
qq_40121308的博客
07-21 1504
类excel框选选中效果
vue实现鼠标按下选中多个元素，然后鼠标松开，检测选中元素
qq_44604924的博客
12-09 3509
关于js中鼠标按下进行元素选择，鼠标松开的时候检测选了多少个元素的实现。 写代码的时候需要实现这个功能，理了一下其中的逻辑，感觉还有点复杂，现在做一个记录。 **说明：**首先要用到鼠标事件，onmousedown、onmouseup（此处不用onmousemove） 获取坐标事件：event.pageX，event.pageY，获取相对于页面的坐标。 getBoundingClient()函数，获取元素距离页面的距离 用法： rectObject = object.getBoundingClientRec
vue判断是否被选中_VUE通过路由来判断选中状态
weixin_39796363的博客
12-19 1235
路由配置如下路由.png/main是一个非登录的首页，主要功能就是有四个菜单选项，点击进入相应的子页面，main页面.png这些子页面都有共同的头部和侧边栏，所以归类到/home这个路由下，main.js需要配置一下项目一打开进入的是/main页面home.jpgrouter.beforeEach((to, from, next) => {if (to.path === '/') {next...
vue2 实现对拖拽选中文字、复制选中文字的控制以及自定义鼠标右键菜单功能
最新发布
MyOxygen的博客
08-04 941
禁止复制选中文字，选中文字右键点击复制后，粘贴时显示的内容为空或为上一次复制的内容。记录实现控制拖拽选中、复制选中文字以及自定义鼠标右键菜单时的过程。实现自定义右键菜单，需阻止浏览器的默认行为，再添加自定义事件。RightClickMenu.vue组件，自定义右键菜单样式。
微信小程序——操作当前页面返回上一个页面
qq_43201350的博客
10-20 1747
主页面：A 次页面： B 由A到B A页面： //更新本页面 go_update(){ console.log('我更新啦!') }, B页面： handleClick(){ let pages = getCurrentPages(); //获取小程序页面栈 let beforePage = pages[pages.length -2]; //获取上个页面的实例对象 beforePage.setData({ //直接修改上个页面的数据（可通过这种
vue实现简单全选和反选功能
10-14
在Vue.js中，实现全选和反选功能是常见的需求，尤其在表格或者列表展示大量数据时。在给定的代码示例中，通过使用Vue的`v-model`和`computed`属性，我们可以轻松地实现这个功能。下面将详细解释这个实现过程。 首先...
vue基于两个计算属性实现选中和全选功能示例
10-17
总结来说，通过使用Vue的计算属性`allchecked`和`checkedCount`，我们可以轻松地实现选中和全选功能。计算属性的好处在于它们提供了自动化的数据同步，使得开发者无需手动处理状态更新，大大简化了代码逻辑。同时，...
vue实现全选、反选功能
08-30
Vue实现全选、反选功能 Vue实现全选、反选功能是指在Vue中实现选择所有项目或取消选择所有项目的功能。...Vue实现全选、反选功能可以通过使用v-model和v-for指令来实现，并且可以广泛应用于实际应用中。
Vue实现购物车的全选、单选、显示商品价格代码实例
10-17
在Vue.js中实现购物车功能，包括全选、单选以及动态显示商品价格，涉及到Vue的数据绑定、事件处理以及计算属性等多个核心概念。以下是对这些知识点的详细解释： 1. **数据绑定** (`v-model`): Vue的核心特性之一，...
使用vue.js实现checkbox的全选和多个的删除功能
10-20
主要介绍了使用vue.js实现checkbox的全选和多个的删除功能,需要的朋友可以参考下
vue脚手架安装很慢_浅谈VUE-CLI脚手架热更新太慢的原因和解决方法
weixin_39764379的博客
12-20 1591
浅谈VUE-CLI脚手架热更新太慢的原因和解决方法用vue-cli构建了项目之后在webstorm开发，用npm run dev跑本地服务，经常修改之后在浏览器刷新没反应，偶尔才会有刷新，需要重新跑一遍npm run dev才会更新，这是怎么回事呢？解决方法webstorm保存的时候会先保存到旧时文件中，其实并没有真正保存，要在setting->stystem settings下的“use ...
vue中，选中多个选项，并且使其高亮
MtangEr的博客
02-27 1万+
在vue中很常见的就是tab切换，选项卡切换，动态添加类名使选项卡选中高亮，对应内容切换，方法大家应该非常熟悉了， 现在提到一种，可以多选多个选项的，效果如下图 贴上代码 &lt;div class="zxlybox"&gt; &lt;p&gt;请选择领域 &lt;span&gt;（可多选）&lt;/span&gt;&lt;/p&gt; &lt;ul&gt;
vue实现全选、全不选和部分选择功能
热门推荐
Charles_Tian的博客
07-24 1万+
在开发项目的过程当中，特别是开发后台管理系统时，会有很多的数据等待管理员去统一管理，所以有时候还需要将一些数据导出，然后打印，这是很有必要的，因为数据可以帮助分析这个产品是否具有价值。 我这里演示后台返回的数据格式如下： ​ { data:{ list:[ {id:240201,code:'nqctedp80pc8',desc:'推广',typ...
Vue Checkbox全选和选中的方法
weixin_30315723的博客
10-15 1441
<div class="search-content"> <Checkbox :value="checkAll" @click.prevent.native="handleCheckAll">全部</Checkbox> <Checkbox-group v-model="checkGroup" @on-change="checkGro...
vue实现全选全不选
前端很忙
03-27 1万+
全选功能可以说是前端开发中非常常见的一个功能。从jQuery到vue的转变主要是一个思想想的转变，用数据驱动dom，也是vue框架的一个核心思想，思想转变过来，对功能的实现自然容易理解一些。
vue实现全选，反选
weixin_30895603的博客
12-19 74
1.example.vue <template> <table class="table-common"> <tr> <th class="th1"><label for="selectAll"><input type="checkbox" v-model='checkAll' @click='checkedA...
vue实现全选选中后个数
05-25
可以通过监听全选框的变化，然后遍历所有子复选框，统计选中的个数。具体实现可以参考下面的代码： HTML部分： ```html <template> <div> <input type="checkbox" v-model="selectAll" @change="selectChange"> 全选 <br> <label v-for="(item, index) in items" :key="index"> <input type="checkbox" v-model="item.checked" @change="itemChange"> {{ item.name }} </label> <p>已选中 {{ selectedCount }} 个</p> </div> </template> ``` JS部分： ```javascript <script> export default { data() { return { selectAll: false, items: [ { name: '选项1', checked: false }, { name: '选项2', checked: false }, { name: '选项3', checked: false }, { name: '选项4', checked: false }, { name: '选项5', checked: false } ] } }, computed: { selectedCount() { return this.items.filter(item => item.checked).length } }, methods: { selectChange() { this.items.forEach(item => { item.checked = this.selectAll }) }, itemChange() { this.selectAll = this.items.every(item => item.checked) } } } </script> ``` 在这个示例中，我们使用了一个 `selectAll` 变量来表示全选框是否选中，使用 `items` 数组来表示所有子复选框的状态，其中每个元素都有一个 `checked` 属性表示是否选中。然后，在 `selectChange` 和 `itemChange` 方法中，我们分别监听全选框和子复选框的变化，更新相应的状态。最后，我们使用一个 `selectedCount` 计算属性来统计选中的个数，并将其展示在页面上。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值