vue-cli4.x + elementUI复选框checkbox的使用

935 阅读1分钟

页面的大致效果就是这样的:
1、点击最上面的框进行全选
2、可以对每一行的数据进行单选
3、将单选/全选的数据在请求后台接口的时候传给后台

在这里插入图片描述

这里呢实际上没有用到checkbox,只是用到了element中table组件的一个属性,详情见:
带checkbox的table,只需要设type属性为selection即可

在这里插入图片描述

上代码
1、@select-all:点击全选触发的事件,接受2个参数
2、@select:点击checkbox触发,接受1个参数

		<el-table
                ref="multipleTable"
                :data="couponRecordsList"
                tooltip-effect="dark"
                style="width: 100%"
                @select-all="selectAll"
                @select="handleSelectionChange">
                <el-table-column type="selection" width="55"></el-table-column>
                <el-table-column label="优惠券名称" width="120">
                    <template slot-scope="scope">{{ scope.row.couponName }}</template>
                </el-table-column>
                <el-table-column prop="name" label="发放用户数量" width="120">
                    <template slot-scope="scope">{{ scope.row.number }}</template>
                </el-table-column>
                <el-table-column prop="address" label="有效期" show-overflow-tooltip>
                    <template slot-scope="scope">{{scope.row.beginDate}}至{{scope.row.endDate}}</template>
                </el-table-column>
                <el-table-column prop="date" label="发放时间">
                    <template slot-scope="scope">
                        {{scope.row.gmtCreate}}
                    </template>
                </el-table-column>
                <el-table-column prop="date" label="发放人">
                    <template slot-scope="scope">{{scope.row.adminName}}</template>
                </el-table-column>
            </el-table>

js代码
1、rows是每一行的数据
2、selection是全选的数据

	//单选
        handleSelectionChange(rows) {
            console.log(rows)
            if (rows.length > 0) {
                let grantArr = []
                rows.forEach(i => {
                    grantArr.push(i.grantId)
                    this.grantAll = grantArr.join(',')
                    
                })
                console.log(this.grantAll)
            } else {
                this.$refs.multipleTable.clearSelection();
            }
            // console.log(this.grantAll)
        },
        // 全选
        selectAll(selection){
            this.allChecked = !this.allChecked
            console.log(this.allChecked)
            if(this.allChecked == true){
                let grantArr = []
                selection.forEach(row => {
                    grantArr.push(row.grantId)
                    this.grantAll = grantArr.join(',')
                    console.log(this.grantAll)
                })
            }
            
            
        },

在这里插入图片描述