Vue Element UI 树形控件el-input的v-model问题

最新推荐文章于 2023-04-14 08:24:55 发布

VIP文章 wzc96411

最新推荐文章于 2023-04-14 08:24:55 发布

阅读量415

点赞数

文章标签： vue.js ui javascript

本文链接：https://blog.csdn.net/wzc96411/article/details/129348385

版权

情景：想在树形控件的节点前面加一个input标签，值与data内的字段绑定。
el-input标签
1、首先扩展props的内容

treeProps:{
         	children: 'children',
            label: 'label',
            hintlabel: 'hintlabel'
          }

2、生成每一个节点的时候记得注册该字段

const newChild = {
         	id: this.sentenceId++,
            label: this.levelInfoType + '  ' + infoArr[i],
            hintlabel: '',
            children: [],
                    };

3、为树形控件增加:props属性
4、input绑定的v-model属性需要更改为node.data.hintlabel

 <el-input size

最低0.47元/天解锁文章

优惠劵

wzc96411

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
Vue Element UI 树形控件el-input的v-model问题

Vue Element UI 树形控件el-input的v-model问题
复制链接

扫一扫

vue-limit-input-group：vue联合输入限制控件el-input-number增强

03-02

分组预设，预设控制组件简述 limit-input-number基于element-ui的el-input-number控件基础改造，所以本组件依赖element-ui limit-input-number可直接替换el-input-number 安装 yarn add vue-limit-input-group 或者 npm i vue-limit-input-group -S 依赖 element-ui/el-input-number 属性 max：所有输入总和最低值min：所有输入总和最低值事件大于（newVal，overVal，maxVal）：当控件总和超过最小值参数解释 newVal：当前输入的值overVal：剩余能量输入的数值maxVal：最大数值minVal：最小数值使用方式 < limit-input-group max =" 12 " min =" 5

vue使用element-ui的el-input监听不了回车事件的解决方法

01-21

原因今天在使用element-ui时，el-input组件监听不了回车事件，如下代码没有想要的效果： <el class=search-input placeholder=请输入内容 v-model=searchText keyup.enter=search()></el> 原因应该是element-ui自身封装了一层input标签之后影响了事件的监听，在element-ui里有很多因为自身封装了几层标签导致事件和样式无法按想要的效果呈现，遇到后可以在网页中查看dom结构分析原因。解决在事件后面加上.native： <el-input cl

1 条评论您还未登录，请先登录后发表或查看评论

vue-cli3.0+element-ui上传组件el-upload的使用

10-17

主要介绍了vue-cli3.0+element-ui上传组件el-upload的使用，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

Vue + Element-ui的下拉框el-select获取额外参数详解

10-14

主要介绍了Vue + Element-ui的下拉框el-select获取额外参数详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

Elementui el-input 实现自定义 v-model

asing1elife's blog

09-24

9545

Vue 本身支持自定义组件实现 v-model ，但 el-input 作为 Elementui 的自定义组件也已经实现 v-model ，那么如果在自定义组件中使用 el-input ，但自定义组件也想实现 v-model ，应该怎么做？错误的方式 Vue 中让自定义组件实现 v-model 可参考 Vue自定义v-model 但如果按照这种方式想要让以下代码实现 v-model ，是不...

elementui 之input 框总结

zhouzhiwengang的专栏

02-16

1万+

1.elementUI的input框，需要用v-model绑定一个变量，这个变量相当于原生input框的value 2.placeholder属性和原生的一样  <el-input v-model="test" placeholder="请输入内容"></el-input> 3.禁用el-input，绑定一个disabled属性即可

【vue】el-input文本框v-model数据改变时不刷新的问题

王佑辉的博客

07-30

9637

1.问题说明 1.在数组循环页面中，改变数组中某个底层的属性，对应的el-input所绑定的v-model的值改变后，el-input内容不更新 2.问题解决 1.可以在赋值的结尾加上this.$forceUpdate()强制更新

vue表单绑定一个输入信息,v-model

最新发布

monicateacat的博客

04-14

584

vue表单绑定一个输入信息,v-model

Vue3：有关v-model的用法

本以为成功很简单，没想到活成普通人都需拼尽全力！

02-23

5245

提起v-model，想必都不陌生，作为vue的经典语法，帮助我们在编写项目的时候，省了很多很多的事情，本文着重记录v-model在组件上的绑定使用！在默认的情况下，组件的都是使用modelValue作为自己的prop，使用update:modelValue作为对应的更新事件，有时候我们需要去改动一哈！基本规则就是，自定义的prop：xxx, 对应的更新事件：update:xxx, 组件上就变成了v-model:xxx的写法，下面以value举例

Element-ui树形控件el-tree自定义增删改和局部刷新及懒加载操作

11-19

需求： vue-cli项目树形控件：一级节点为本地节点，默认展开一级节点，增删改后局部刷新数据。增加节点，点击确定后局部刷新，渲染新数据。源码 element组件样式 <el-tree class="treeitems" :data="data...

Element-ui input输入框限制输入数字后，当输入非数字后v-model失效

HTML5_student的博客

11-15

1185

Element-ui input输入框限制输入数字后，当输入非数字后v-model失效

Vue表单输入绑定(v-model)

ZerZhang的博客

10-10

528

Vue表单输入绑定(v-model)

Element组件（input输入框）

weixin_68915174的博客

11-29

7435

通过slot来指定在input中分发的前置或者后置的位置。在输入框中前置或后置一个元素（标签|按钮）formatter和parser。在点击由 clearable 属性生成的清空按钮时触发。仅在输入框失去焦点或用户按下回车时触发。在 Input 失去焦点时触发。在 Input 获得焦点时触发。在 Input 值改变时触发。选中 input 中的文字。使 input 获取焦点。使 input 失去焦点。

el-input 使用 oninput输入校验时，v-model数据不更新问题

Mazepk的博客

05-25

3739

描述：当el-input中对输入数据进行校验时，使用oninput后，数据不及时更新或者为空，并且，如果是校验必填项，还会出现已输入内容，校验不通过的情况原代码如下： <el-input v-model.number="maxLen" oninput="value=value.replace(/[^0-9]/g,'')" ></el-input> 注：本例中校验的是正整数，v-model需要使用number，如果校验字符串，需去掉number 报错结果如下：从图中

vue：input框使用v-model绑定值之后无法修改绑定值

热门推荐

10-07

1万+

日常给自己挖坑：搬来的砖，一个没注意的小细节就自己挖了个大坑上代码： <el-form-item label="联系方式" prop="phone"> <el-input v-model="formLabel.phone"></el-input> </el-form-item> methods: { // 获取新增页面的默认电话号码 getAreaAndBankName() { apiRequest

【Vue项目实战8】资源树el-tree的input形式【Element UI】==＞添加分级图标样式==＞选中节点显示操作栏（新建修改删除）==＞弹框新增删除

Sabrina_cc的博客

06-22

1875

上一篇博客我们已经介绍过el-tree样式修改的一种了，这篇博客我们继续整理另一种el-tree样式的优化（1）CSS分层图标和分层样式（以五层为最大）（2）选中节点展示【操作栏】包含：新增子节点，修改当前节点，删除当前节点（3）选中节点 == 修改时回显选中节点和父节点；新增时展示当前节点；（4）新增一级节点（5）父节点使用若依自带的treeselect组件...

vue实现搜索框和树形控件功能

KangMino的博客

02-23

2717

input输入框组件参数说明：Input 输入框https://element.eleme.cn/#/zh-CN/component/input Input 为受控组件，它总会显示 Vue 绑定值。通常情况下，应当处理input事件，并更新组件的绑定值（或使用v-model）。否则，输入框内显示的值将不会改变。 <el-input v-model="keyWord" :clear-icon-click="handleSearch" :on-ico...

Vue Element UI 表格中的Input输入无法展示（真解，不骗人）

Future1994的博客

11-18

4453

要给input赋值初始值

帮我用vue+element-ui封装个el-tabs 下分块包含 el-form的组件

03-24

好的，我可以为您提供代码示例，实现用 Vue Element-UI 封装一个带有分块、包含 el-form 的 el-tabs 组件。代码如下： ```vue <template> <div class="xs-tabs-form-container"> <el-tabs v-model="activeTab" style="height: 100%"> <el-tab-pane :label="pane.label" :key="index" v-for="(pane, index) in tabPanes"> <el-form :model="formData" :rules="formRules" ref="xsForm" label-width="100px"> <el-row :gutter="20" v-for="(element, rowIndex) in pane.elements" :key="rowIndex"> <el-col :span="12" v-for="(item, colIndex) in element" :key="colIndex"> <el-form-item :label="item.label" :prop="item.prop"> <template v-if="item.custom"> <slot :name="item.prop" :item="item"></slot> </template> <template v-else> <el-input v-model="formData[item.prop]"></el-input> </template> </el-form-item> </el-col> </el-row> <el-form-item> <el-button type="primary" @click="submitForm">提交</el-button> </el-form-item> </el-form> </el-tab-pane> </el-tabs> </div> </template> <script> export default { name: "XsTabsForm", props: { tabPanes: { type: Array, // [{label: 'Tab 1', elements: [[{label: 'Field 1', prop: 'field1'}]]}] required: true }, rules: { type: Object, // {field1: [{required: true, message: '不能为空', trigger: 'blur'}]} required: true } }, data() { return { activeTab: 0, formData: {} }; }, computed: { formRules() { const rules = {}; for (let key of Object.keys(this.formData)) { if (this.rules[key]) { rules[key] = this.rules[key]; } } return rules; } }, methods: { submitForm() { this.$refs['xsForm'].validate((valid) => { if (valid) { this.$emit('submit-form', this.formData); } else { this.$message.error('表单校验失败，请检查输入'); } }); } } }; </script> <style scoped> .xs-tabs-form-container { height: 100%; } </style> ``` 您可以通过 `tabPanes` 和 `rules` 两个参数传递组件中的标签页面和表单控制参数。每个标签页面可以包含多个行，每行包含多个表单项。可以选择使用默认的输入框，也可以通过 `item.custom` 参数自定义表单控件。您可以在 `submit-form` 事件中获取表单数据。

“相关推荐”对你有帮助么？

非常没帮助
没帮助
一般
有帮助
非常有帮助

提交