只读: readonly
在 data 里定义: readonly: true,
然后在 input 框里加上 readonly 就可以了.
禁用: disabled
在 data 里定义: edit: true,
然后在 input 框里加上::disabled="edit" 就可以了
PS: 下面看下 elementui 通过 disabled 属性指定是否禁用 input 组件, 如何用 DOM 操作取消 disabled 属性
- <!DOCTYPE html>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <meta http-equiv="X-UA-Compatible" content="ie=edge">
- <title>
- 通过 disabled 属性指定是否禁用 input 组件
- </title>
- <link rel="stylesheet" href="elementui/elementui.CSS" rel="external nofollow">
- </head>
- <body>
- <div id="app">
- <el-dialog title="收货地址" :visible.sync="dialogFormVisible">
- <el-form :model="form">
- <el-form-item label="活动名称" :label-width="formLabelWidth">
- <el-input v-model="form.name" auto-complete="off" :disabled="true" class="input">
- </el-input>
- </el-form-item>
- <el-form-item label="活动区域" :label-width="formLabelWidth">
- <el-select v-model="form.region" placeholder="请选择活动区域">
- <el-option label="区域一" value="shanghai">
- </el-option>
- <el-option label="区域二" value="beijing">
- </el-option>
- </el-select>
- </el-form-item>
- </el-form>
- <div slot="footer" class="dialog-footer">
- <el-button @click="dialogFormVisible = false">
- 取 消
- </el-button>
- <el-button type="primary" @click="cancelAttr">
- 确 定
- </el-button>
- </div>
- </el-dialog>
- </div>
- </body>
- <script type="text/javascript" src="vue/vue.min.js">
- </script>
- <script type="text/javascript" src="elementui/elementui.js">
- </script>
- <script type="text/javascript">
- new Vue({
- el: '#app',
- data() {
- return {
- dialogFormVisible: true,
- form: {
- name: '',
- region: '',
- date1: '',
- date2: '',
- delivery: false,
- type: [],
- resource: '',
- desc: ''
- },
- formLabelWidth: '120px'
- }
- },
- mounted() {},
- methods: {
- // 点击确定的时候取消属性
- cancelAttr() {
- //1. 首先我们要拿到 input 的父 class(input)
- // 当我们设置 disabled 属性的时候, 父集的 class 设置成 input el-input is-disabled, 首先我们改变父集的 class, 把父集改成可编辑状态, 才能修改 input 的属性
- const parent = document.querySelector(".input");
- parent.className = "input el-input"; // 改变父集的 class, 把父集改成可编辑状态,
- //2. 在设置 input 属性
- // 获取 input
- const input = document.querySelector(".input input");
- // 设置 input 的属性为 false
- input.disabled = false;
- }
- }
- })
- </script>
- </HTML>
elementui 通过 disabled 属性指定是否禁用 input 组件, 有时候我们会取消单个 disabled 属性, 那我们如何用 DOM 操作取消 disabled 属性, 下面是我走的一下弯路, 供大家参考一下, 避免再走这样的弯路
总结
来源: https://www.jb51.net/article/149799.htm