vue-element记录整理
Vue 记录 整理 Element
2023-09-14 09:04:05 时间
一、修改弹窗层-title
1. 定义一个变量 dailogTitleType
<el-dialog :title="dailogTitleType+'图片'" :visible.sync="dialogVisible" width="500px" ></el-dialog>
2. 返回一个空的变量
export default {
data() {
return {
dialogTitleType:''
}
}
}
3. 在对应按钮的onclik方法里加入dialogTitleType变量的默认值
<el-button type="primary" size="mini" @click="handleAdd">添加图片</el-button>
<el-button type="primary" size="mini" @click="handleEdit">编辑</el-button>
//点击新增按钮触发函数
handleAdd: function(index, row) {
this.dailogTitleType ="添加";
this.addPictureDialogVisible = true;
this.form = Object.assign({}, row);
},
//点击编辑按钮触发函数
handleEdit: function(index, row) {
this.dailogTitleType ="编辑";
this.addPictureDialogVisible = true;
this.form = Object.assign({}, row);
},
二、点击弹窗层关闭按钮
el-dialog :title="dailogTitleType" :visible.sync="tanchu4" class="create2" :before-close="handleDialogClose"></el-dialog>
handleDialogClose() { //点击右上角关闭按钮
alert("点击了关闭按钮")
},
//监听点击第几个根据-demoTabNav定义的这个值
<div class="layui-tab layui-tab-brief" lay-filter="demoTabNav" id="demoTabNavId">
<ul class="layui-tab-title">
<li class="layui-this">任务统计</li>
<li>人员列表</li>
<li>任务详情</li>
</ul>
</div>
element.on('tab(demoTabNav)', function(data){
alert(data.index);
});
select 选择事件 @change="(e)=>projectIdClick(e,scope.$index )"
setInterval(() =>{
// console.log(that.getFavoritesQuestion.length, '测222222')
},2000)
scope.$index 表格获取**索引**
v-if="userMenu.indexOf('expert:trainMethod')!==-1" 数组包含
this.$router.back(); //返回上一页
相关文章
- vue+mongodb_mongodb查询速度
- 尚硅谷Vue课程P30-P35笔记(后台回复 vue 可获得更多笔记!)
- 记录一次jenkins 部署vue 项目的问题及解决方法
- 【VUE】- 前端封装之父子组件传值
- 请简述什么是Vue组件化开发_vue组件化开发
- Vue笔记(11) vue-router
- SpringBoot项目整合Vue做一个完整的用户注册功能
- Vue内部是如何渲染视图
- 记录关于Vue+element-ui的系列问题
- 记录第二天-Vue起步
- 「后端小伙伴来学前端了」Vue中全局事件总线(GlobalEventBus)原理及探究过程
- Vue中 $attrs、$listeners 详解及使用
- 引入vuejs文件_引入vue文件
- vue 调用子组件方法失败_Vue子组件调用父组件的方法及常见问题「建议收藏」
- java和vue+springboot的大学生奖学金申请系统
- 腾讯前端一面常考vue面试题汇总2
- Vue-Router学习笔记,持续记录
- linux下快速部署Vue项目(linux部署vue)
- Vue接入Redis拓展应用的可能性(vue调redis)
- Vue技术实现访问远程Redis的精彩之旅(vue访问远端redis)
- Vue如何连接Redis(vue怎么连接Redis)
- Oracle与Vue官网联合宣传前瞻技术,轻松开发(oracle vue官网)