实现单一报表或数据的切换：判断

最新推荐文章于 2019-06-11 17:00:00 发布

lgx19940508

最新推荐文章于 2019-06-11 17:00:00 发布

阅读量185

点赞数

分类专栏：功能实现

本文链接：https://blog.csdn.net/lgx19940508/article/details/83744305

版权

功能实现专栏收录该内容

2 篇文章 0 订阅

订阅专栏

背景
同一个接口，通过点击切换两个不同的表格，可建立两个cloumns表单；通过判断，实现表单的切换
代码如下：

点击按钮对表单的监控与绑定

                                                                                                      Template

                    <div class="item-wrap item-wrap-s">
                        <label class="label-text">统计维度</label>
                        <div class="btn-wrap">
                      
                            <button v-for="item in tabTypeList"
                                    :class="getClass(params.tabType===item.value)"
                                    @click="params.tabType=item.value">{{item.text}}
                            </button>
                            
                        </div>
                    </div>

JS

data(){
	return{
		tabTypeList: [ // 统计维度
			{text: '按单车汇总', value: '2'},
			{text: '按线路汇总', value: '1'}
        ],
        params: {
                    ......
                    tabType: '2' // 统计维度
                },
    }
}

表单的绑定

                                                                                                      Template

            <div class="report-table-wrap">
                <table-page ref="tableRef"
                            url="/returnPower/searchChargingCount"
                            
                            **// 对绑定的表单进行判断!!!**
                            :columns="params.tabType === '2' ? columns2 : colunms1"
                            
                            :params="params">
                </table-page>
            </div>