vue1.x表格结构中选中/全选等功能实现

<template>
    <div>
        <table>
            <tr>
                <th>
                    <div class="checkbox">
                        <input type="checkbox" id="title-table-th" class="checkboxInp" name="title-table-th"
                               @click='selectAll' :checked="checkAllState">
                        <label for="title-table-th" class="checkboxLabel"></label>
                    </div>
                </th>
            </tr>
            <tr v-for="item of list">
                <td>
                    <div class="checkbox">
                        <input type="checkbox" class="checkboxInp" name="title-table-checkbox"
                               id="title-table-td{{item.mid}}" :checked=" item.checkState? 'checked':''"  @click='selectPerson(item.mid, item)' data-typeId="{{item.mid}}">
                        <label class="checkboxLabel" for="title-table-td{{item.mid}}"></label>
                    </div>
                </td>
            </tr>
        </table>
    </div>
</template>

<script>
    export default {
        name: "aaa",
        data() {
            return {
                selectPersonList: [],
                selectPersonAll: false,
                recentPageCheckedNumber: '',
            }
        },
        methods: {
            selectAll() {
                console.log(this.checkAllState)
                // this.checkAllState = !this.checkAllState

                if (!this.checkAllState) {
                    this.list.forEach((item) => {
                        if (!item.checkState) {
                            this.selectPersonList.push(item.mid)
                            item.checkState = true
                        }
                    })

                } else {
                    this.list.forEach((item) => {
                        if (item.checkState) {
                            for (let i = 0; i < this.selectPersonList.length; i++) {
                                if (this.selectPersonList[i] == item.mid) {
                                    this.selectPersonList.splice(i, 1)
                                    item.checkState = false
                                }
                            }

                        }
                    })

                }

            },
            
            selectPerson(mid, item) {
                console.log(item.checkState);
                item.checkState = !item.checkState

                if (item.checkState) {
                    this.selectPersonList.push(mid)
                } else {
                    for (let i = 0; i < this.selectPersonList.length; i++) {
                        if (this.selectPersonList[i] == mid) {
                            this.selectPersonList.splice(i, 1)
                        }
                    }

                }

                console.log(this.selectPersonList)
            },
            
            async MemberList(params) {

                let data = await MemberList(params)
                this.list = data.members
                this.total = data.count

                //修改
                this.list.forEach((item) => {   //checkBox
                    Vue.set(item, "checkState", false);
                })

                //修改选中状态
                this.list.forEach((item) => {
                    //当列表中有此id时修改选中状态为选中
                    this.selectPersonList.forEach((v) => {
                        if (item.mid === v) {
                            Vue.set(item, "checkState", true);
                        }
                    })
                })


            },

        },
        
        computed: {
            checkAllState: function() {
                this.recentPageCheckedNumber = 0
                for (let i = 0; i < this.list.length; i++) {
                    for (let j = 0; j < this.selectPersonList.length; j++) {
                        if (this.list[i].mid === this.selectPersonList[j]) {
                            this.recentPageCheckedNumber++;
                            break;
                        }
                    }
                }
                return !!this.list.length && this.recentPageCheckedNumber === this.list.length
            }

        },
    }
</script>

<style scoped>
    table tr td:first-child div.checkbox,table tr th:first-child div.checkbox{
    	position: relative;
    }
    
    
    table tr td:first-child input[type="checkbox"],table tr th:first-child input[type="checkbox"]{
        visibility: hidden;
        display: none
    }
    
    .checkboxLabel{
    	background-color:#fff;border:1px solid rgba(0,0,0,0.15);
    	display:inline-block;
    	height:14px;
    	margin-top:-1px;
    	vertical-align:
    	middle;
    	width:14px;
    	line-height:1;
    }
    
    
    .checkboxInp:checked+.checkboxLabel:after{
    	background-color:#57ad68;
    	content:" ";
    	display:inline-block;
    	height:10px;
    	margin:2px;
    	width:10px
    
    }

</style>
复制代码