vue.js 怎么实现表格的 allcheck

Question

参考了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: ''
                            }
                        }
                    ]
                }
            }    
        }

深表感谢!

Answer 1

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...

Answer 2

<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" @child-change="allCheck"></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" v-on:child-change="checkNumChange"></rs-checkbox>
                    </td>
                    <td v-for="val in table.columns">{{row[val.key]}}</td>
                </tr>
            </tbody>
        </table>
        <div>{{checkNum}}</div>
    </div>
</template>
<script>
    import rsCheckbox from '../form/checkbox.vue'

    export default {
        components:{
            rsCheckbox
        },
        data(){
            return{
                selectAll:{
                    checked:false
                },
                searchQuery:'',
            }
        },
        props: {
             table:Object
         },
         methods:{
             selectAllAction (val) {
                this.table.tdDate.forEach(row => {
                    row.checkbox.checked = val
                })
            },
            allCheck(){
                if(this.selectAll.checked){
                    this.table.tdDate.forEach(row => {
                        row.checkbox.checked = true
                    })
                }else{
                    this.table.tdDate.forEach(row => {
                        row.checkbox.checked = false
                    })
                }
            },
            checkNumChange(){
                let num=0
                this.table.tdDate.forEach(row => {
                    if(row.checkbox.checked){
                        num++
                    }
                })
                if(num==this.table.tdDate.length){
                    this.selectAll.checked=true
                }else{
                    this.selectAll.checked=false
                }
            },
         }
    }
</script>

自己研究了一下,暂时解决...

Answer 3

我是这样写的，用checkData来保存选中的列表实现多选删除：

data(){
    articles: [
        {
            id:1,
            name:'test1'
        },
        {
            id:2,
            name:'test2'
        }
    ],
    checkData: []
}

thead：

<th>
    <input type="checkbox" class="checkAll" @change="checkAll">
</th>

tbody:

<td>
    <input type="checkbox" :value="article.id" v-model="checkData">
</td>

全选与反选函数：

checkAll() {
    var self = this;
    var allFlag = event.target.checked;
    if (!allFlag) {
      self.checkData = [];
    } else {
      self.checkData = [];
      self.articles.forEach(function(item) {
        self.checkData.push(item.id)
      })
    }
},

Answer 4

https://github.com/ChobitsSP/...

Answer 5

最近刚好用到，与了篇文章，可以参考下：https://segmentfault.com/a/11...