Vue实现切换视图（表单与三列多行）的全选与清除功能：

1、表单（index.vue）

template：

 <el-button type="success" v-if="shitu==2" @click="handleSelectAll">全选</el-button><el-button type="success" v-if="shitu==2" @click="handleClearCheck">清除勾选</el-button>Table区域:<el-table ref="multipleTable" :row-key="getRowKey" @selection-change="handleSelectionChange" v-show="shitu==1" ><el-table-column type="selection" :reserve-selection="true" align="center" width="55"></el-table-column>//这个为勾选框......</el-table><shiTu v-if="shitu==2" ref="shituDialog" />

script：

 import shiTu from "./shitu"export default{components:{shiTu},data(){return{tableCheckList:[],}}}

methods：

 getRowKey(row){//拿到该选中的表单的idreturn row.id},handleSelectionChange(val){//拿到该选中的表单的全部数据this.tableCheckList=val;},handleSelectAll(){//全选this.$refs.shituDialog.selectAll()},handleClearCheck(){//清除勾选if(this.shitu==2){this.$refs.shituDialog.checkList=[]}else{this.tableCheckList=[];this.$refs.multipleTable.clearSelection();}}

2、三列多行的视图（shitu.vue）

template:

<el-checkbox-group v-model="checkList"><ul><li v-for="(item,index) in dataList">........</li></ul>
</el-checkbox-group>

script:

export default{data(){return{checkList:[],dataList:[],}}
}

methods:

selectAll(){if(this.checkList&&this.checkList.length){this.checkList=[]}else{this.dataList.forEach(item=>{this.checkList.push(item.id)})}
}

Vue实现切换视图（表单与三列多行）的全选与清除功能：相关推荐

element手机验证格式_基于Vue+elementUI实现动态表单的校验功能(根据条件动态切换校验格式)...
前言开发过程中遇到了一个需求,根据用户选择的联系方式,动态改变输入框的检验条件,并且整个表单是可以增加的在线访问:动态表单校验 github(欢迎star): https://github.com ...
基于VUE的ElementUi可视化表单设计器布局器
码农苦码农懂的个人空间工作日志正文基于VUE的ElementUi可视化表单设计器布局器顶原码农苦码农懂发布于 09/11 15:35 字数 1187 阅读 41 收藏 0 点赞 1 评论 ...
使用Vue动态生成form表单的实例代码
具有数据收集.校验和提交功能的表单生成器,包含复选框.单选框.输入框.下拉选择框等元素以及,省市区三级联动,时间选择,日期选择,颜色选择,文件/图片上传功能,支持事件扩展. 欢迎大家star学习交流: ...
vue如何制作自定义表单校验样式
vue如何制作自定义表单校验样式先上效果图由于vue的优越性,所以衍生出很多与之匹配并非常受欢迎的ui组件库,比如最常见的element-ui和antvue,两者内容几乎相同,样式略有差异,所以在 ...
Vue官网提供表单验证cnpm i vee-validate@2 --save
Vue官网提供表单验证使用步骤: 1:安装vee-valadite,别安装最新版本@2 2:在plugins文件夹中创建一个validate.js[专门注册vee-valadite] 3:注册插件 ...
基于springboot+vue的开源自定义表单问卷系统
一.项目简介基于springboot+vue的开源自定义表单问卷系统二.实现功能支持表单拖拽支持各种控件操作(基础组件.进阶组件等) 基础组件包含文本.多行文本.图片.图形.日历控件支持拖拽 ...
关于vue.js element ui 表单验证 this.$refs[formName].validate()的问题
方法使用前需了解: 来自"和"小编的小提示: 首先打印一下this.$refs[formName],检查是否拿到了正确的需要验证的form. 其次在拿到了正确的form后,检查 ...
form表单用butten提交后无反应表单提交三种方式
form表单用butten提交后无反应&表单提交三种方式一,表单提交无反应有时候,我们发现表单提交的butten按钮,根本就没niao用.鼠标都点烂了,也提交不上去.找了半天什么错误也没找 ...
vue密码正则验证表单验证_如何在Vue中使用表单验证
vue密码正则验证表单验证介绍 (Introduction) Almost every web application makes use of forms in some way, as such ...

Vue实现切换视图（表单与三列多行）的全选与清除功能：

1、表单（index.vue）

2、三列多行的视图（shitu.vue）

Vue实现切换视图（表单与三列多行）的全选与清除功能：相关推荐

最新文章

热门文章