Vue动态获取数据后控件不可编辑问题

目录
  • 功能介绍
    • 实现过程
      • 1.做判断
      • 2.在控件中使用editNotavailable
      • 3.定义editNotavailable的初始状态

老规矩：先走波流程！

看实现效果，更好根据大家的问题相对应的解决自己的问题。

功能介绍

由动图可以看到，当我点击添加试题时，因为要添加些数据，跳转过去的界面必须是可以使用的。再当我点击编辑，携带过去的数据是不能更改的，只更改下方题干部分。

具体如何实现控件获得数据后不可更改呢？主要是用到判断，可以看到这里我只给input和select组件设置了不可用，但他们都是共用一个方法。

实现过程

1.做判断

因为点击是一加载就出现的数据，所以是当获得过来的数组不等于空时执行

  //钩子函数，初始化页面用
  created() {
    this.carryCurrentRowCode = this.$route.query.carryCurrentRowCode;
    if (this.carryCurrentRowCode != undefined) {
      // 试题分类
      this.questionClassification = this.carryCurrentRowCode.questionClassifyId;
      // 试题类型
      this.v_type = this.carryCurrentRowCode.questionTypeId;
      // 试题难度
      this.v_difficulty = this.carryCurrentRowCode.degreeInitial;
      // 试题编号
      this.i_number = this.carryCurrentRowCode.serial;
      this.statusData();
      this.editNotavailable = true;
}

carryCurrentRowCode,是接收过来的数组，具体如何接收可以看这篇文章

因为不可为空undefined才执行判断里面的数据，里面的this点不是重点，它们都是接收过来显示到第二个界面的数据，关键看代码：

this.editNotavailable = true;

2.在控件中使用editNotavailable

课程、试题分类下拉框和试题编号共用:disabled="editNotavailable"

<!-- 下拉框-课程分类 -->
     <el-select
        :disabled="editNotavailable"
        v-model="couponSelected "
        class="select_coures"
     </el-select>
>
<!-- 下拉框-试题类型 -->
     <el-select
        :disabled="editNotavailable"
        class="select_qutestions"
        v-model="v_type"
        @change="q_type"
>
     </el-select>
<!-- 接收试题编号 -->
<el-input
     v-model="i_number"
     :disabled="editNotavailable"
     placeholder="请输入编号"
     style="width:10%"
     class="m_left"
      >
</el-input>

3.定义editNotavailable的初始状态

editNotavailable: false,

课程、试题分类下拉框和试题编号共用，点击编辑后：true不可用，false可用。正常跳转用false表示可用，if判断里因为是不可用的所以改为true不可用。

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue动态禁用控件绑定disable的例子

    场景 报修范围取值不同时 ,区域有时需要禁用 代码 <el-form-item label="报修范围" prop="applicationRange" > <el-select v-model="addInfo.applicationRange" placeholder="请选择报修范围" style="width: 200px" @change="inputToDisable

  • 详解Vue-基本标签和自定义控件

    详解Vue-基本标签和自定义控件

    按照国际惯例先安利:Useful-Open-Source-Android_jb51.rar 上一篇把环境搭完了,然后把默认的8080内容跑通了,这一片尝试把常用的一些标签给学习一下(按钮啊,列表,图片啥的) 整篇都是跟着官方教程学,只是加入一系列自己的理解和分析,方便以后温故 默认环境已经帮我们把包结构建好了,如下 index.html是我们的页面 main.js是让App.vue和页面产生关联的"挂载js文件"(不知道这么描述合适不合适,有问题欢迎提出) App.vue就是我们具体的

  • vue实现动态表格提交参数动态生成控件的操作

    上面要求做一个根据后台数据动态生成控件,然后让用户输入提交查询信息,然后动态生成表格在显示出来.动态控件代码如下 <el-form :model="formData" style="padding: 0 5px;"> <div v-if="tableshow"> <div v-for="(item,i) in control" :key="i" style="padd

  • Vue动态获取数据后控件不可编辑问题

    Vue动态获取数据后控件不可编辑问题

    目录 功能介绍 实现过程 1.做判断 2.在控件中使用editNotavailable 3.定义editNotavailable的初始状态 老规矩:先走波流程! 看实现效果,更好根据大家的问题相对应的解决自己的问题. 功能介绍 由动图可以看到,当我点击添加试题时,因为要添加些数据,跳转过去的界面必须是可以使用的.再当我点击编辑,携带过去的数据是不能更改的,只更改下方题干部分. 具体如何实现控件获得数据后不可更改呢?主要是用到判断,可以看到这里我只给input和select组件设置了不可用,但他们

  • 动态加载用户控件至DataList并为用户控件赋值实例演示

    动态加载用户控件至DataList并为用户控件赋值实例演示

    为了实现这个演示,Insus.NET使用通用的新闻例子,它类别(目录)以及文章.在一个页面,显示所有类别,每个目录下显示最新几条新闻. 效果如下: 目录是用DataList控件显示,而文章标题列表是一个用户控件显示,这个用户控件将动态被加入至DataList. 复制代码 代码如下: View Code <asp:Repeater ID="Repeater1" runat="server" OnItemDataBound="Repeater1_Item

  • vue.js element-ui tree树形控件改iview的方法

    vue.js element-ui tree树形控件改iview的方法

    element-ui组件的tree树形控件修改源码改为iview组件 实现原理 修改了element-ui源码,把源码里面的tree模块提取出来 然后修改element自带checkbox等组件为iview的checkbox,并且兼容方法 最后修改element样式,改为iview风格,自己也添加了一些样式 新的tree组件可以说是element的逻辑,iview的风格 <template> <div @click.stop="handleClick" v-show=

  • VUE饿了么树形控件添加增删改功能的示例代码

    VUE饿了么树形控件添加增删改功能的示例代码

    本文介绍了VUE饿了么树形控件添加增删改功能的示例代码,分享给大家,具体如下: element-ui树形控件:地址 在原文档中有个案例是有新增和删除功能,但是后来发现其修改的数据并不能直接影响到树形数据,所以采用了 render-content 的API重新写了个组件. 写个开发的步骤,所以文章比较长emmm 大致效果如图: 1.省市API 在网上复制了个省市的list,有两个属性是新增的 isEdit :控制编辑状态 maxexpandId :为现下id的最大值 export default{

  • asp.net数据验证控件

    1.非空数据验证控件RequiredFiledValidator. 属性:ControlToValiata 指验证控件对哪一个控件进行验证.例如验证TextBox控件的ID属性txtPwd,只要将RequiredFiledValidator.控件的ControlToValidata属性设置为txtPwd.代码:this.RequiredFiledValidator1.ControlToValidata="txtPwd"; ErrorMessage属性:用于指定页面中使用Required

  • jquery获取点击控件的绝对位置简单实例

    在使用jquery的过程中,想取得当前点击input的绝对位置而去显示一个div,jquery本身提供offset和position这个两个方法,但position官方解释是relative to the offset parent,可以看到是针对父结点的,而offset官方解释relative to the document,貌似使用offset可以直接绝对定位.但是在网页中如果出现嵌套div的情况,top和left会叠加,因此这个时候如果要定位显示一个新的div就要把父亲结点的offset去

  • jquery获取easyui日期控件的值实现方法

    jquery easyui日期控件中,在页面里用JS拿到设置的日期值的方法 jquery获取easyui日期控件的值 jquery easyui 日期框 有这样的一个日期文本框: <input type="text" name="mdate" size="20" value＝"" id="mdate" class="easyui-datebox"/> 使用easyui给文本框

  • vue指令之表单控件绑定v-model v-model与v-bind结合使用

    一.表单控件绑定v-model v-model 双向数据绑定:一般用于表单元素,会忽略表单元素的value.checked.selected的初始值,且将Vue实例的数据作为数据来源. ① 单行文本框 input[type="text"] .多行文本框 textarea: v-model值绑定到value属性: <body> <div id="app"> <input type="text" v-model=&quo

  • Layer弹出层动态获取数据的方法

    前一阵子做了一个简单的小项目,用到了Layer弹出层(弹出层的用法就不多加赘述了,官网上都有详细的介绍,这里附上网址http://layer.layui.com/),当时前后台合页面的时候就出现了一个问题,弹出层总是获取不到数据,不过后面还是和同学们一起解决了,希望能帮助到大家. 之前的代码: <a id="func11" onclick="func11();">点击查看</a> function func11() { console.log

  • Vue实现渲染数据后控制滚动条位置(推荐)

    需求场景如下: 实现了消息发送,如果容器内消息过多,会出现滚动条,最新的消息位于最底部,不能及时出现在可视区域内,此时就需要在渲染列表后,将滚动条的位置定位到最底部.先来看看最终实现的效果 实现思路 渲染完数据后,通过refs对象获取消息容器的实际高度 将滚动条的设置到最底部 实现过程 sendMessage: function (event) { // 数据渲染 this.senderMessageList.push(thisSenderMessageObj); // 改变滚动条位置 this

随机推荐