ElementUI el-dialog中打开一个新的el-dialog(Vue子组件定义变量的一个坑)【图】

先上效果图： 用户点击到文本框内即可查看Guss的详情 这是el-dialog里面套着一个el-dialog，我去年写过一篇博客是使用ifame标签来实现el-dialog里面嵌套一个div的，随着开发经验增加。。。发现用组件化即可很完美的解决dialog里面嵌套dialog的问题。 请务必注意！dialog的放置位置！ 在这个Guss的父组件就是图中阴影部分加入上述代码（如果需要引用组件，在底下注册就行） 上一下Guss评分的代码： 这里需要注意的...

vue elementui 为tree设置默认选中，以及将选中内容提交【图】

vue--14--vue+elementUI【图】

vue之elementui，树形组件el-tree实现左右拖动滚动条【代码】

<el-tree class="el-scrollbar" id="fixtree" :data="logTreeList" @node-click="handleNodeClick" @node-contextmenu="showMenu" @node-expand="closeMenu" @node-collapse="closeMenu" show-checkbox @check-change="handleCheckChange" ref="tree" ...

Vue整合ElementUI【代码】【图】

ElementUI官方文档 https://element.eleme.cn/#/zh-CN/component/installation 安装EelementUI npm i element-ui -S引入ElementUI //完整引入 import Vue from 'vue'; import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; import App from './App.vue';Vue.use(ElementUI);new Vue({el: '#app',render: h => h(App) });使用radio组件 <!--template--> <h1>Hello</h1> <el-radio v-model="radio"...

vue3.0之elementui分页bug【代码】

场景描述: 表格在第二页删除一个数据，然后重新调取列表接口，发现接口数据在第一页，然而视图数据在第二页,关键是current-page改变无效果 解决方案 https://blog.csdn.net/mm0715/article/details/102795167el-pagination v-if="pageshow" let data = reactive({time: ,tableData: [],rows: 6,page: 1,total: 0,pageshow: true,startTime: ,endTime: }); const deleteUserList = (val: object) => {const parmas = {id: (val as...

vue打包区分环境，创建config文件，corss-env自定义全局环境配置，通过cdn引入js，css，不打包依赖模块elementui【代码】

vue打包区分环境，创建config文件，corss-env自定义全局环境配置，通过cdn引入js，css，不打包依赖模块elementui 目录 vue打包区分环境，创建config文件，corss-env自定义全局环境配置，通过cdn引入js，css，不打包依赖模块elementui1. 使用 `corss-env` 自定义环境变量，不使用vue自身的环境变量（1）安装依赖（2）配置`package.json`中命令（3）使用 `process.env._ENV` 接收启动时的环境变量 2. 配置cdn引入页面，设置不打包依赖...

【VUE3.0体验】建路由，加入ElementUI3框架【代码】

1、ElementUi3框架npm i element3 -S引入框架--main.jsimport element3/lib/theme-chalk/index.css import { createApp } from vue import Element3 from element3 import App from ./App.vuecreateApp(App).use(Element3).mount(#app)2、路由npm install vue-router建立页面文件：新建目录views/home.vue,views/test.vue，分别在里面放些显示代码 建立路由文件：新建目录router/index.jsimport { createRouter, createWebHashHist...

前端打包到后台Vue elementui字体图标显示问题解决方案【代码】

原因分析 如果你的前端打包资源放置在了诸如 sprint boot 的后端项目中，可以看看是不是后端的项目把你的 woff 的字体图标文件进行了转义，导致浏览器解析失败。 解决方案 在maven文件的pom文件的build标签加入下面的 <plugin> <groupId>org.apache.maven.plugins</groupId><artifactId>maven-resources-plugin</artifactId> <configuration> <nonFilteredFileExtensions> <nonFilteredFileExtension>ttf</nonFilteredFileExtensio...

elementUI起步按需引用配置(vue+npm)【代码】

按照官方文档的步骤来，踩了一些坑，记录下 一、安装elementUI npm i element-ui -S 二、安装babel-plugin-component npm install babel-plugin-component -D 然后官方文档的原话是将 .babelrc 修改为： {"presets": [["es2015", { "modules": false }]],"plugins": [["component",{"libraryName": "element-ui","styleLibraryName": "theme-chalk"}]] }首先，.babelrc这个文件没有提路径，有的人尝试直接根目录下新建这个文件然后...

vue-cli引入elementui版本使用问题【代码】【图】

vue-cli2之前版本引入element形式入右图: https://element.eleme.cn/#/zh-CN/component/installationvue-cli3-4则采用左图 vue add elementui然后会自动生成element.js，运行起来后页面时一片空白的，这里原因是vue-cli3后，取消了Vue 这个对象。官方提供另一种方式(这个仔细看文档才知道)：element-plus,具体操作可以点击跳转查看 在 main.js 中写入以下内容： import { createApp } from 'vue' import ElementPlus from 'element...

Vue+elementui防止重复提交【代码】【图】

解决办法：elementui的组件中提交按钮的disabled属性，通过禁用按钮来防止重复提交1、定义变量data(){return {isDisabled:false,//答卷提交按钮是否生效} } 2、在按钮处设置属性<el-button @click="submit()" :disabled="isdisabled">提交<el-button> 3、在method方法中设置是否禁用 向后台发送请求前，设置isDisabled=true禁用提交按钮 在请求返回数据或请求失败的反馈后，设置isDisabled=false取消禁用提交按钮 submit(){this....

vue-elementui-admin框架介绍

一：框架介绍** vue-element-admin 是一个后台前端解决方案，它基于 vue 和 element-ui实现。它使用了最新的前端技术栈，内置了 i18 国际化解决方案，动态路由，权限验证，提炼了典型的业务模型，提供了丰富的功能组件。 集成方案: vue-element-admin 基础模板: vue-admin-template 二：环境准备 需要在本地安装 node 和 git。本项目技术栈基于 ES2015+、vue、vuex、vue-router 、vue-cli 、axios 和 element-ui，所有的请求数据都...

Vue3.0+elementui3.0学习之路——容器充满【代码】

前言 自己磨了半天才磨出来，真的好讨厌css elementUI 容器充满代码 <template><el-container><el-aside :width="width"><el-button type="primary" @click="tt">主要按钮</el-button></el-aside><el-container><el-header>Header</el-header><el-main>Main</el-main><el-footer>Footer</el-footer></el-container></el-container> </template><script> export default {data() {return {width: "200px",num: 200,};},methods: {tt...

ElementUI Dialog 结合Vue实现对话框body“二分”布局【代码】【图】

Dialog 结合Vue实现对话框body“二分”布局 需求描述 如下图，把对话框body内容部分，分成上下两部分，其中上部分高度根据窗口大小动态调整，如果内容过多，则出现滚动条，以便滚动查阅被遮挡内容，下部分内容(即关闭|保存按钮所在容器)高度固定。 对话框高度不固定，随窗口高度变化而变化代码实现 <template><el-dialogtitle="负载配置"width="60%":visible="dialogVisible"custom-class="dialog-settings"><load-settings-form :...