最新公告
  • 欢迎您光临起源地模板网,本站秉承服务宗旨 履行“站长”责任,销售只是起点 服务永无止境!立即加入钻石VIP
  • vue-cli4.x + elementUI复选框checkbox的使用

    正文概述 掘金(只会html的前端)   2021-04-13   850

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

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

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

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

    上代码
    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)
                    })
                }
                
                
            },
    

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


    起源地下载网 » vue-cli4.x + elementUI复选框checkbox的使用

    常见问题FAQ

    免费下载或者VIP会员专享资源能否直接商用?
    本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
    提示下载完但解压或打开不了?
    最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。若排除这种情况,可在对应资源底部留言,或 联络我们.。
    找不到素材资源介绍文章里的示例图片?
    对于PPT,KEY,Mockups,APP,网页模版等类型的素材,文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买,且本站不负责(也没有办法)找到出处。 同样地一些字体文件也是这种情况,但部分素材会在素材包内有一份字体下载链接清单。
    模板不会安装或需要功能定制以及二次开发?
    请QQ联系我们

    发表评论

    还没有评论,快来抢沙发吧!

    如需帝国cms功能定制以及二次开发请联系我们

    联系作者

    请选择支付方式

    ×
    迅虎支付宝
    迅虎微信
    支付宝当面付
    余额支付
    ×
    微信扫码支付 0 元