vue——笔记

最新推荐文章于 2024-07-03 20:51:10 发布
原创 最新推荐文章于 2024-07-03 20:51:10 发布 · 259 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue

1、前端取到数组以后只需要取数组里的某一个值，
遍历数组

//遍历数组dataForm
 let data = this.dataForm.map(c => {
		return parseInt(c.id);     //BigDecimal类型转换为Int类型
});

2、级联选择器点击重置按钮清空已选择的内容（如图所示效果）
在这里插入图片描述

 <el-cascader
                                v-model="id"
                                :props="defaultParams"
                                :options="options"
                                placeholder="请选择"
                                @change="handleChange">
                        </el-cascader>

当选中节点变化时触发handleChange方法

handleChange(id) {
            id= id[id.length-1];  //取数组的最后一位
        },

下面是重置清空的方法

 _reset() {
            //清空查询条件
            this.id = [];
        },

关键是一定要写v-model,然后将绑定的v-model清空就行。

3、ElementUi 表格取消全选框（效果如图）
在这里插入图片描述

 <el-table
                            ref="multipleTable"
                            :data="page.records"
                            highlight-current-row
                            @current-change="handleCurrentChange"
                            @selection-change="selectionChangeHandle"
                            :row-class-name="tableRowclassName"
                            :header-cell-class-name="cellClass"
                            height="220" style=" margin-top:20px; width:99%;"
                    >
                        <el-table-column  type="selection"  width="100"  ></el-table-column>
                        <el-table-column label="电缆线名称" prop="name" width="150"></el-table-column>
                        <el-table-column label="所属线路" prop="feederName"></el-table-column>
                        <el-table-column label="长度(m)" prop="length"  width="100"></el-table-column>
                    </el-table>

具体实现方法，这个方法主要就是给表格所需要的列添加类名
（cellClass()方法主要给复选框那一列添加 类名为 ‘disabledCheck’）

<el-table  :header-cell-class-name="cellClass"></el-table>
cellClass(row){     
    if (row.columnIndex === 0) {           
     return 'disabledCheck'     
    } 
},

CSS样式设置如下

/* 去掉全选按钮 */
.el-table .disabledCheck .cell .el-checkbox__inner{
    display: none !important;
}

.el-table .disabledCheck .cell::before{
    content: '选择';
    text-align: center;
    line-height: 37px;
}

原文链接来自：https://www.cnblogs.com/JinXinYuan/p/12165027.html

4、elementui带单选框的表格
https://www.cnblogs.com/calamus/p/8569196.html

https://www.jianshu.com/p/63d70324abfc

5、elementui表格使用checkbox实现单选效果

https://blog.youkuaiyun.com/qq_36718999/article/details/92773919

6、element-ui的table表格的多选框默认选中
https://blog.youkuaiyun.com/u010007013/article/details/97828405

7、element-ui trr树形结构点击当前背景再点击其它地方会消失问题解决，以及修改当前背景色。

https://blog.youkuaiyun.com/weixin_44903107/article/details/105513492

8、前端Vue中常用rules校验规则

https://www.cnblogs.com/lieone/p/11856330.html

9、elementUI属性：

1）table 表格中参数过长省略并且提示显示：
:show-overflow-tooltip=“true” 或者 show-overflow-tooltip

Vue —— 路由相关知识点汇总
Bonsoir777的博客
10-16 1327
本文主要介绍 Vue中 有关路由的相关知识点。
Vue——创建待办事件列表
msmxsd的博客
04-16 1331
根据MDN网站学习记录笔记 Vue 实现待办事项列表一、主要vue文件梳理App.vueToDoForm.vueToDoItem.vueToDoItemEditForm.vue二、要点总结 创建一个待办事件列表实现待办事件的增删改以及选中功能，项目源码查看 一、主要vue文件梳理 App.vue <to-do-form>监听： todo-added事件当表单被提交时通过ToDoForm组件中的onSubmit()方法被回调到父组件app.vue <to-do-item>监听：
vuex 基础总结
qq_40893035的博客
03-10 351
（一）为什么要使用vuex Vuex的定义： Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。 （简单说就是，一个公共的数据共享中心，在任何地方都能调用数据共享中心的数据，并且在一处修改，其他位置也会跟着修改） Vuex主要解决了： 复杂组件之间的数据共享问题 （二）使用vuex的步骤 1 . 安装 vuex npm install vuex --save 2 . 在 src 目录下创建 store
【Vue】change 事件
小秀的博客
08-09 4663
事件在用户完成对输入框的修改并进行其他操作或离开输入框时触发。这可以是用户点击页面上的其他元素、按下回车键、切换焦点或通过编程方式触发。事件可以在用户完成对输入框的修改并离开输入框时进行相应的处理。事件在元素的值发生变化并失去焦点时触发。当用户在输入框中输入内容并发生失去焦点的情况下，就会触发。方法会在输入内容发生改变且输入框失去焦点时被调用，并从事件对象。事件并不会实时监听用户输入的变化，而是在一定条件下触发。中获取输入框的值，并输出到控制台中。双向绑定到 Vue.js 的。
详解Vue3中的常见的监听事件click、input和change
一起学习
12-30 7706
本文主要介绍Vue3中的常见的监听事件click、input和change。
vue功能之“loading加载优化“
空投在我怀里的博客
03-16 2659
一、新建组件写入 <template> <div class="loading"> <img src="/imgs/loading-svg/loading-bars.svg" alt=""> </div> </template> <script> export default { name:'loading' } </script> <style lang='scss'&
vue的@change的用法
好看的皮囊千篇一律，有趣的灵魂万里挑一。
10-07 1万+
@change 是 Vue.js 中用于监听表单元素值变化的事件处理器。通常用于监听表单输入框等元素的变化，以便在值发生变化时执行特定的操作。
Vue学习笔记——【尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通-哔哩哔哩】 https://b23.tv/
08-14
Vue学习笔记——【尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通-哔哩哔哩】 https://b23.tv/
vue相关知识点——浅浅笔记
06-22
Vue 相关知识点浅浅笔记 一、 Vue 概述 Vue.js 是一个渐进式 JavaScript 前端框架，用于构建用户界面。它具有声明式、响应式的数据绑定和组件化的开发特点。 Vue 基于 MVVM 模式，使用数据驱动的方式，将数据和 ...
Vue技术栈实现的云笔记项目，印象笔记的功能基本都实现.zip
10-21
该项目基于Vue技术栈实现了一个云笔记应用，名为“vue-evernote-master”，其设计灵感和功能特点借鉴了知名的云笔记服务——印象笔记。Vue.js作为前端框架，提供了强大的组件化开发能力，使得项目的结构清晰，代码...
Vue 监听元素前后变化值实例
11-19
我就废话不多说了，大家还是直接看代码吧~ export default { data() { return { item: '' } }, watch: { item(now, before){ let remove = before.filter(x => now.indexOf(x) == -1); let add = now.filter(x => before.indexOf(x) == -1); /* 显示字符串或数组元素的增加和减少 */ console.log(add, remove); } } } 补充知识：Vuejs+Element监听-
vue中change事件的使用
qq_73882890的博客
07-03 1878
在Vue中，@change并不是一个Vue特有的指令，而是HTML元素（如<input><select>等）的一个事件监听属性，它在元素的值发生变化时触发。在Vue的模板中，我们经常使用v-on指令来监听DOM事件，包括change事件。然而，为了简化语法，Vue允许使用符号作为的简写。因此，@change在Vue模板中用于监听元素的change事件。当事件被触发时，Vue会调用一个方法（或内联语句），并将事件对象作为参数传递给它。但是，具体到change事件，除了事件对象（event。
Vue组件之间的传值
kamianlaidaa的博客
05-21 510
Vue组件之间的传值 1.父传子： 在父组件上的自组件标签上绑定一个自定义属性，挂载需要传递的值，在子组件使用props:[ ] 来接受，代码如下： 父组件： //父组件里，myName是自定义属性， name就是传递的值 <user-detail :myName="name" /> export default { components: { UserDetail } } // 子组件 export default { props:
vue select change事件传递自定义参数
JiaPeng366的博客
08-06 1万+
今天记录一个小问题，最近get到的一个方法，不太常用，记录一下，增强记忆吧。 之前在vue项目中，也经常使用select标签，也经常用change事件，经常用的change事件中，一直有个默认参数，就是选中的选项的信息，最近一个需求除了需了选中项信息外，还需要其他的参数，今天记录一下这种传参方式，直接上代码。 // 普通用法，没有自定义参数 @change="handleChange()" handleChange (value) { // value 是change事件默认传的信息 } // 需要
Vue中引用公共方法和公共组件
葫芦娃的博客
11-26 4816
一、Vue中引用公共方法 1.在src新建common文件夹,再新建common.js export default({ formatInt:function(num, length) { return (Array(length).join('0') + num).slice(-length); } }); 2.main.js引入: //引入公共方法 import common...
vue中下拉菜单的赋值问题
m0_72167535的博客
09-26 3756
vue中下拉菜单的值选中了，但是没有显示到画面上，可能是因为赋值的方式导致，应该使用this.$set进行赋值
vue的一些易混淆事件整理 - @change | trigger: 'blur' |
Yoyo_Yan的博客
07-23 3万+
部分总结参考 简书 HTML DOM事件 （一） onchange onpropertychange 和 oninput 事件的区别 1、onchange 事件与 onpropertychange 事件的区别： onchange 事件在内容改变（两次内容有可能还是相等的）且失去焦点时触发。 onpropertychange 事件却是实时触发，即每增加或删除一个字符就会触发，...
VUE+element组件 @change 传自定义参数
yyqx1994的博客
03-25 2976
正确写法如下： <div class="first_box" v-for="(item,index) in query_conditions" :key="index"> <el-cascader class='fl_l name_width' :class="index == 0 ? 'mg-l' : ''" v-model="item.demandName" :options="optionsMore"
Element分页handleCurrentChange方法触发问题解决
热门推荐
革命尚未成功同志还需努力的博客
08-27 3万+
先操作element分页，切换到第二页，然后操作。 从代码中强制将current-page强制设置为1 （即重新查询数据，并将当前页重置为第1页）此时画面显示是对的， 分页组件已经将第1页的页码数字激活了然后点击第2页数字，进行换页画面显示也是对的，第2页数字变成激活状态， 但是此时竟然无法触发current-change事件 原因 使用this.pagination.currentP...
vue3 笔记
最新发布
03-24
### 关于 Vue3 学习笔记和教程 Vue 是一个流行的前端框架，用于构建交互式的用户界面。以下是有关 Vue3 的学习资源以及如何设置开发环境的相关信息。 #### 1. 安装 Vue CLI 并创建 Vue3 项目 为了快速上手 Vue3，可以使用官方推荐的工具 `vue-cli` 来初始化一个新的项目。安装 Vue CLI 需要 Node.js 和 npm 支持。运行以下命令来全局安装 Vue CLI： ```bash npm install -g @vue/cli ``` 接着可以通过以下命令创建新的 Vue3 项目[^1]： ```bash vue create my-vue3-project ``` 在创建过程中可以选择 Vue3 版本作为默认选项。 --- #### 2. 使用 CDN 方式引入 Vue3 进行初步体验 如果不想立即配置本地开发环境，可以直接通过 HTML 文件中的 `<script>` 标签加载 Vue3 的 CDN 资源来进行简单的实验。例如，在 HTML 中加入以下代码即可开始编写第一个 Vue 应用程序[^2]: ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue3 Example</title> <!-- 引入 Vue3 --> <script src="https://unpkg.com/vue@next"></script> </head> <body> <div id="app">{{ message }}</div> <script> const app = { data() { return { message: 'Hello, Vue3!' } } } Vue.createApp(app).mount('#app') </script> </body> </html> ``` 上述代码展示了如何利用 Vue3 实现数据绑定功能。 --- #### 3. 组件间通信：v-model 在 Vue3 中的应用 对于更复杂的场景，比如父子组件之间的双向数据绑定，Vue3 提供了增强版的 `v-model` 功能。下面是一个典型的例子，展示父组件向子组件传递值并接收更新的过程[^3]： **父组件** ```javascript <script setup> import MyInput from './components/MyInput.vue' import { ref } from 'vue' const txt = ref('初始文本') </script> <template> <MyInput v-model="txt" /> <p>{{ txt }}</p> </template> ``` **子组件 (MyInput.vue)** ```javascript <script setup> defineProps(['modelValue']) defineEmits(['update:modelValue']) </script> <template> <input :value="modelValue" @input="$emit('update:modelValue', $event.target.value)" /> </template> ``` 此示例说明了 Vue3 如何支持自定义事件名称前缀（如 `update:`），从而实现更加灵活的数据同步机制。 --- #### 4. 推荐的学习资料 除了以上提到的内容外，还有许多优秀的在线课程可以帮助深入理解 Vue3 技术栈。其中包括但不限于以下几个方面： - **尚硅谷 Vue2.0+Vue3.0 全套教程**: 结合实际案例讲解核心概念和技术要点。 - **黑马程序员 Vue3 学习笔记**: 主要针对初学者设计，适合零基础入门者阅读。 - **官方文档**: https://v3.vuejs.org/guide/introduction.html —— 最权威且详尽的技术指南。 ---
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值