vue.js 怎么实现表格的 allcheck

问题描述

问 题

参考了radon ui的table组件,发现一个问题,表格头部的allcheckbox,点击后可以实现全选功能,
但是全选后,对tbody内的checkbox进行操作,表格头部的checkbox不能进行对应的响应,
不知道应该怎么实现这个功能,请教各位,学习学习

<template>
    <div>
        <div class="tableCtrl" v-if="table.options.search">
            <input name="query" v-model="searchQuery" class="searchInput" placeholder="输入对表格内容筛选">
        </div>
        <table>
            <thead>
                <tr>
                    <th v-if="table.options.check" class="checkColumn">
                        <rs-checkbox :checkbox="selectAll"></rs-checkbox>
                    </th>
                    <th v-for="col in table.columns">{{col.value}}</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="row in table.tdDate | filterBy searchQuery">
                    <td v-if="table.options.check" class="checkColumn">
                        <rs-checkbox :checkbox="row.checkbox"></rs-checkbox>
                    </td>
                    <td v-for="val in table.columns">{{row[val.key]}}</td>
                </tr>
            </tbody>
        </table>
    </div>
</template>
<script>
    import rsCheckbox from '../form/checkbox.vue'

    export default {
        components:{
            rsCheckbox
        },
        data(){
            return{
                selectAll:{
                    checked:false
                },
                searchQuery:'',
            }
        },
        props: {
             table:Object
         },
         watch: {
             'selectAll.checked' (val) {
                this.selectAllAction(val)
            },
         },
         methods:{
             selectAllAction (val) {
                this.table.tdDate.forEach(row => {
                    row.checkbox.checked = val
                })
            }
         }
    }
</script>

table 内数据如下

data(){
            return{
                tableDate:{
                    options:{
                        search: true,
                        check: true,
                    },
                    columns: [
                        {
                            key: 'id',
                            value: 'ID' 
                        },{
                            key: 'name',
                            value: '姓名'
                        },{
                            key: 'age',
                            value: '年龄'
                        },{
                            key: 'tel',
                            value: '电话'
                        }
                    ],
                    tdDate:[
                        {
                            id: 1,
                            name: '孙悟空',
                            age: '20',
                            tel: '13811111111',
                            checkbox: {
                                disabled: false,
                                checked: false,
                                text: ''
                            }
                        },{
                            id: 2,
                            name: '贝吉塔',
                            age: '30',
                            tel: '13822222222',
                            checkbox: {
                                disabled: false,
                                checked: false,
                                text: ''
                            }
                        },{
                            id: 3,
                            name: '短笛',
                            age: '10',
                            tel: '13833333333',
                            checkbox: {
                                disabled: false,
                                checked: false,
                                text: ''
                            }
                        },{
                            id: 4,
                            name: '龟仙人',
                            age: '200',
                            tel: '13844444444',
                            checkbox: {
                                disabled: false,
                                checked: false,
                                text: ''
                            }
                        }
                    ]
                }
            }    
        }

深表感谢!

解决方案

vue有一个神器能够实现 allcheck 这种功能，那就是 计算属性computed

大体思路是

1.给每个数据增加一个属性，selected
2.在 computed 里面增加一个 allSelected 的计算属性
3.定义该属性的 get & set
4.把allSelected 绑定到 thead 的 checkbox 上。
这样就可以实现

1.tbody 里面每行都选中，thead checkbox自动选中
2.thead checkbox选中状态下 tbody某一行不选择，thead 选中自动取消
3.thead checkbox点击选中，tbody所有行选中
4.thead checkbox点击取消选中 tbody所有行不选中
具体代码实现见
https://jsfiddle.net/muchen/7...

这篇关于vue.js 怎么实现表格的 allcheck的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！