江苏建设厅网站查询,网页视频下载安卓,轻栈小程序官网,山东省建设厅的网站效果图#xff1a; 点击添加学生按钮#xff0c;弹出Dialog,收集用户信息#xff1a; el-table中自定义复选框#xff0c;选中一行#xff0c;可以点击删除 代码区域#xff1a;就一个HTML文件
!DOCTYPE html
html langen
head 点击添加学生按钮弹出Dialog,收集用户信息 el-table中自定义复选框选中一行可以点击删除 代码区域就一个HTML文件
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title学生列表/titlescript srchttps://cdn.jsdelivr.net/npm/vue2/dist/vue.js/script!-- 引入样式 --link relstylesheet hrefhttps://unpkg.com/element-ui/lib/theme-chalk/index.css!-- 引入组件库 --script srchttps://unpkg.com/element-ui/lib/index.js/script/head
bodydiv idrootel-button typeprimary clickadd添加学生/el-buttonel-table:datainfoborderstylewidth: 100%el-table-columnwidth200template slot-scopescope!-- 复选框点击一个就全选的解决方案el-checkbox-group v-model空数组el-checkbox :labelscope.$index/el-checkbox-group不显示lable值,在checkbox标签内部加入br标签--el-checkbox-group v-modelcheel-checkbox v-modelformData.select :labelscope.$indexbr/el-checkbox/el-checkbox-group/template/el-table-columnel-table-columnpropgradelabel班级width200/el-table-columnel-table-columnpropnamelabel姓名width200/el-table-columnel-table-columnpropgenderlabel性别width200/el-table-columnel-table-columnpropagelabel年龄/el-table-columnel-table-columnlabel操作template slot-scopescopeel-button typeprimary clickhandledelete(scope.$index)删除学生/el-button/template/el-table-column/el-table!-- 弹框 --el-dialogtitle用户填写:visible.syncdialogVisiblewidth30%:before-closehandleCloseel-form :modelformData refresetForm :rulesrulesel-form-item label班级 propgradeel-input v-modelformData.grade/el-input/el-form-itemel-form-item label姓名 propnameel-input v-modelformData.name/el-input/el-form-itemel-form-item label性别 propgenderel-radio v-modelformData.gender label男男/el-radioel-radio v-modelformData.gender label女女/el-radio/el-form-itemel-form-item label年龄 propageel-input v-modelformData.age/el-input/el-form-item/el-formspan slotfooter classdialog-footerel-button clickdialogVisible false取 消/el-buttonel-button typeprimary clickhandleSubmmit确 定/el-button/span/el-dialog/div
/body
script typetext/javascript//设置为 false 以阻止 vue 在启动时生成生产提示。Vue.config.productionTip false;//创建vue实例var vmnew Vue({el:#root,data(){return {info:[],dialogVisible: false,//表单数据formData:{select: false,grade:,name:,gender:,age:},che:[],//规则rules: {grade: [{ required: true, message: 请输入班级, trigger: blur }],name: [{ required: true, message: 请选择姓名, trigger: blur }],gender: [{ required: true, message: 请选择性别, trigger: blur }],age: [{ required: true, message: 请选择年龄, trigger: blur }]}}},methods: {add(){this.dialogVisible true;this.$nextTick((){this.$refs[resetForm].resetFields();})},handledelete(index){this.info.splice(index,1) //用于添加或删除数组中的元素this.formData.selectfalse;},handleSubmmit(){//https://blog.csdn.net/qq_58805860/article/details/127161823//push进去的是同一个对象导致总是相同数据this.info.push({select: this.formData.select,grade:this.formData.grade,name:this.formData.name,gender:this.formData.gender,age:this.formData.age});this.dialogVisible false},handleClose(done) {this.$confirm(确认关闭).then(_ {done();}).catch(_ {});}},});/script
/html
