• 一个巧妙的方法实现elementUI的table的行选中


      问题背景:点击上面的框,选中下面对象的行数据

      刚开始考虑使用的是table的事件:toggleRowSelection,但是发现一个奇怪的现象

    <div v-if="orderData.length > 0">
        <h5>审核意见:</h5>
        <div class="review bg_gray" v-for="(item,index) in orderData">
            <div class="content" v-if="item.review_data">
                <span @click="toggleSelection(0)">
                <el-checkbox v-model="checkList[item.order_id]"></el-checkbox>
                </span>
                <span>{{item.review_data}}</span>
            </div>
        </div>
    </div>
    
    <el-button @click="toggleSelection(0)">选中状态</el-button>
    toggleSelection(index){
        this.$refs.order.toggleRowSelection(this.orderData[index]);
    }

      上面2个方法,一模一样,但是只有第二个能选中,第一个却无效。一直想不明白为什么。

      所以考虑换一种方式:

      直接看代码吧:我在表格里面加了一列checkbox,然后让上面的checkbox和表格里的checkbox的v-model指向同一数据,那么这样上面变化时,下面也会变化,下面变化,上面也跟着变化,同步响应。

      当然如果想下面表格里的chexkbox不能点选,那么就要加上:onclick="return false;",这也是一个技巧吧

    <template>
    <el-main>
        <div v-if="orderData.length > 0">
            <h5>审核意见:</h5>
            <div class="review bg_gray" v-for="(item,index) in orderData">
                <div class="content" v-if="item.review_data">
                    <el-checkbox v-model="checkList[item.order_id]" v-if="!item.is_choose"></el-checkbox>
                    <span>{{item.review_data}}</span>
                </div>
            </div>
            <h5>针对以上每一个问题,我们可以为您提供如下服务,确保您的数据库高效稳定运行,您可以勾选下单,我们立即为您服务:</h5>
        </div>
        <el-table
        ref="order"
        :data="orderData"
        class="serviceStyle"
        show-summary
        :summary-method="totalRule">
            <el-table-column width="80">
                <template slot-scope="scope">
                    <el-checkbox onclick="return false;" v-model="checkList[scope.row.order_id]" v-if="!scope.row.is_choose"></el-checkbox>
                </template>
            </el-table-column>
            <el-table-column prop="service_class" label="服务类别"></el-table-column>
            <el-table-column prop="service_name" label="服务名称"></el-table-column>
            <el-table-column prop="service_price" label="服务价格"></el-table-column>
          </el-table>
          <div class="btn_submit" v-if="userInfo && userInfo.roleName === 'user'">
            <el-button @click="submitOrders('orders')" type="primary" plain>提交订单</el-button>
        </div>
    
        <h5>您也可以购买一年的云服务,除了解决以上问题外,还能享受到
            <router-link :to="'/couldService'">
                点击查看云服务详情
            </router-link>
        </h5>
    </el-main>
    </template>
    <script type="ecmascript-6">
    import {getReviewApi,reviewSaveApi} from '@/apis'
    import {mapGetters} from 'vuex'
    export default {
        data(){
            return {
                orderData:[],
                sum:0,
                orders:[],
                checkList:{},
                serviceShow:false
            }
        },
        computed:{
            ...mapGetters(['reportInfo','userInfo'])
        },
        watch:{
            checkList:{
                handler:function(oldValue,newValue){
                    this.orders = JSON.parse(JSON.stringify(this.orderData))//深拷贝的技巧
                    let count = 0//修正删除的index
                    this.orderData.forEach((item,index) => {
                        if(this.checkList[item.order_id]){
                            this.serviceShow = true
                        }else{
                            this.orders.splice(index - count,1)
                            ++count
                        }
                    })
                },
                deep:true
            }
        },
        methods:{
            fetchData(){
                getReviewApi(this.reportInfo.report_id).then((res) => {
                    if(res.status === 200){
                        this.orderData = res.data
                    }
                })
            },
            submitOrders(type){
                if(this[type].length === 0){
                    this.$message({
                        message:'请选择订单',
                        type:'error'
                    })
                    return false
                }
                reviewSaveApi('choosePreorders',this[type]).then(res => {
                    if(res.status === 200){
                        this.fetchData()
                        this.$router.push('/shopCart')
                        this.$message({
                            message:'订单提交成功',
                            type:'success'
                        })
                    }
                })
            },
            totalRule(){
                let _sum = 0
                this.orderData.forEach(item => {
                    if(this.checkList[item.order_id]){
                        _sum += item.service_price
                    }
                })
                return ['合计','','',_sum]
            }
        },
        mounted(){
            this.fetchData()
        }
    }
    </script>
    <style scoped lang="stylus" rel="stylesheet">
    @import '../../assets/css/index.styl'
    .review{
        white-space pre-wrap
        padding 10px 20px
        font-size 14px
    }
    .sum{
        font-size 14px
        text-align right
    }
    .serviceStyle /deep/ .el-table__footer-wrapper .has-gutter td:nth-child(4){
        color red
        font-size 20px
    }
    </style>
  • 相关阅读:
    10、xsl中import用法
    09、xsl中输出对应的列和值
    08、xsl中操作子节点带循环输出
    07、xsl中操作子节点
    06、xsl中choose进行多条件选择
    05、xsl中IF的用法
    04、xsl中对字段进行排序
    03、xsl中添加筛选条件
    02、xsl的for循环输出
    01、xsl样式表用网页输出
  • 原文地址:https://www.cnblogs.com/goloving/p/9198410.html
Copyright © 2020-2023  润新知