【前端】表单 编辑模式、只读模式
- 写在最前面
- 一、什么是编辑模式与只读模式？
- 应用场景
- 编辑模式
- 只读模式
- 二、编辑模式的实现例子
- 只读模式的实现
- 动态切换模式
- 使用HTML的readonly属性
- 使用Vue.js的v-if指令
- 三、前后端交互 `<template>`代码块
- 两个字段独立
- 是否直接与后端接口交互，以及它们的数据变换方法
- 四、小结
写在最前面
在前端开发中，表单（Forms）是用户与应用交互的关键组件。
本文将详细介绍表单的编辑模式和只读模式的定义、实现方法及其应用场景。
在前端开发中，我们可以使用HTML的readonly属性来控制表单元素的只读状态，而在使用Vue.js框架时，可以结合v-if指令来实现表单的编辑和只读切换。
同时，我们使用Vue的数据绑定功能来实现表单数据的同步更新。
一、什么是编辑模式与只读模式？
应用场景
- 用户注册与登录：在用户注册时，表单需要处于编辑模式，允许用户输入信息。而在用户查看个人资料时，可以使用只读模式。
- 信息审核：在信息审核页面，审核人员通常只需要查看信息而无需修改，这时可以使用只读模式。
- 数据展示：在数据展示页面，如报告或统计信息页面，使用只读模式可以防止误操作。
编辑模式
编辑模式是指表单处于可编辑状态，用户可以输入、修改或删除数据。这种模式通常用于用户需要提交或更新信息的场景，例如注册页面、设置页面等。
只读模式
只读模式是指表单处于不可编辑状态，用户只能查看表单中的数据，而不能对其进行修改。这种模式常用于展示信息的场景，例如查看详情页、审核页面等。
二、编辑模式的实现例子
要实现表单的编辑模式，我们需要使用HTML表单元素，例如<input>、<textarea>、<select>等。以下是一个简单的表单编辑模式的示例：
<form>
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<label for="email">Email:</label>
<input type="email" id="email" name="email">
<label for="message">Message:</label>
<textarea id="message" name="message"></textarea>
<button type="submit">Submit</button>
</form>
在这个示例中，用户可以输入他们的姓名、电子邮件和消息，并通过点击“Submit”按钮提交表单。
只读模式的实现
要实现表单的只读模式，可以使用HTML的readonly属性，使表单元素变为只读状态。以下是一个简单的只读模式的示例：
<form>
<label for="name">Name:</label>
<input type="text" id="name" name="name" value="John Doe" readonly>
<label for="email">Email:</label>
<input type="email" id="email" name="email" value="john.doe@example.com" readonly>
<label for="message">Message:</label>
<textarea id="message" name="message" readonly>This is a read-only message.</textarea>
</form>
在这个示例中，所有的表单元素都被设置为只读状态，用户无法修改其中的内容。
动态切换模式
在实际应用中，常常需要在编辑模式和只读模式之间动态切换。可以通过JavaScript来实现这一功能。以下是一个示例：
使用HTML的readonly属性
<form id="userForm">
<label for="name">Name:</label>
<input type="text" id="name" name="name" value="John Doe">
<label for="email">Email:</label>
<input type="email" id="email" name="email" value="john.doe@example.com">
<label for="message">Message:</label>
<textarea id="message" name="message">This is a sample message.</textarea>
<button type="button" id="editButton">Edit</button>
</form>
<script>
const form = document.getElementById('userForm');
const editButton = document.getElementById('editButton');
editButton.addEventListener('click', () => {
const isReadOnly = form.elements[0].hasAttribute('readonly');
for (let i = 0; i < form.elements.length; i++) {
form.elements[i].readOnly = !isReadOnly;
}
editButton.textContent = isReadOnly ? 'Save' : 'Edit';
});
</script>
在这个示例中，点击“Edit”按钮可以在编辑模式和只读模式之间切换。
使用Vue.js的v-if指令
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue.js Editable and Read-Only Form</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
</head>
<body>
<div id="app">
<form>
<label for="name">Name:</label>
<input v-if="isEdit" type="text" id="name" v-model="name">
<input v-else type="text" id="name" v-model="name" readonly>
<label for="email">Email:</label>
<input v-if="isEdit" type="email" id="email" v-model="email">
<input v-else type="email" id="email" v-model="email" readonly>
<label for="message">Message:</label>
<textarea v-if="isEdit" id="message" v-model="message"></textarea>
<textarea v-else id="message" v-model="message" readonly></textarea>
<button type="button" @click="toggleEdit">{{ isEdit ? 'Save' : 'Edit' }}</button>
</form>
</div>
<script>
new Vue({
el: '#app',
data: {
isEdit: false,
name: 'John Doe',
email: 'john.doe@example.com',
message: 'This is a sample message.'
},
methods: {
toggleEdit() {
this.isEdit = !this.isEdit;
}
}
});
</script>
</body>
</html>
三、前后端交互 <template>代码块
注：rowObj 和 postData 是 Vue 组件中的两个数据对象，都是是父组件表格的。
<td colspan="4" class="tc">基线关系</td>
<td colspan="4" class="tc">
<el-input size="mini" v-if="isEdit" v-model="postData.formula"></el-input>
<div v-else>{{ rowObj.formula }}</div>
</td>
这段代码中，rowObj.formula和postData.formula用于不同的上下文和目的：
-
rowObj.formula:- 这是在
<div>元素内使用的，当isEdit为false时显示。 - 它直接显示
rowObj对象中formula属性的值。 - 这通常用于只读模式，即当用户不在编辑状态时，直接展示数据。
- 这是在
-
postData.formula:- 这是在
<el-input>元素的v-model属性中使用的，当isEdit为true时。 v-model指令创建了一个双向数据绑定在postData对象的formula属性和输入框之间。- 这意味着，当用户编辑输入框中的内容时，
postData.formula的值会实时更新，反之亦然。 - 这通常用于编辑模式，允许用户修改
formula的值。
- 这是在
rowObj.formula用于展示模式，直接显示数据，
而postData.formula用于编辑模式，允许用户修改数据，并通过双向数据绑定同步更新。
两个字段独立
根据props，rowObj和postData是作为独立的属性传入组件的。它们各自维护自己的状态，且默认情况下，它们的值不会直接相互影响。这是因为：
-
独立性：
rowObj和postData作为props传入，通常意味着它们来源于父组件，且作为独立的数据源处理。除非在组件内部或父组件中有明确的逻辑来同步这两个对象的formula属性，否则它们的值不会自动相互影响。 -
单向数据流：Vue强调单向数据流，即
props的值应该由父组件控制，子组件可以接收并使用props的值，但不应直接修改它们。如果需要基于rowObj.formula的值来更新postData.formula，应该通过事件向父组件通信或使用.sync修饰符、v-model等方式来实现双向绑定或状态同步，但这需要额外的代码实现。 -
编辑模式与数据同步：如果有需求在编辑模式下将
rowObj.formula的值同步到postData.formula，这通常需要通过特定的逻辑来实现，比如在isEdit变为true时，手动设置postData.formula = rowObj.formula，或者通过监听器（watchers）来实现这种同步。
所以，除非在组件内部或通过父组件有明确的逻辑来同步这两个属性，rowObj.formula和postData.formula的值不会自动相互影响。
是否直接与后端接口交互，以及它们的数据变换方法
通常，与后端接口的交互会在 Vue 组件的 methods 或者 lifecycle hooks（如 created, mounted）中进行。数据变换方法也可能在这些部分定义，或者通过 Vue 的 computed properties 实现。
为了确定 rowObj 和 postData 是否与后端接口交互，以及它们的数据变换方法，你需要查看以下几个方面的代码：
- 查看 Vue 组件的 methods：搜索是否有 AJAX 请求（如使用
axios.get,axios.post等）来获取或发送数据到后端。 - 查看 Vue 组件的 lifecycle hooks：在
created或mounted钩子中，可能会有调用后端接口的代码。 - 查看 computed properties：如果有对
rowObj或postData进行处理或变换的逻辑，可能会在 computed properties 中定义。 - 查看 Vuex store（如果使用）：如果项目中使用了 Vuex 来管理状态，那么与后端的交互可能在 actions 中进行，同时 mutations 可能会用于更新
rowObj或postData。
由于这些信息需要查看完整的 Vue 组件代码或项目代码才能确定，建议你根据上述提示在你的项目中进行搜索和分析。
四、小结
通过合理地使用这两种模式，可以提升用户体验和应用的易用性。希望本文对你在前端开发中处理表单有所帮助。
如果你有任何疑问或需要进一步的帮助，请在评论区留言。祝你开发顺利！
hello，我是 是Yu欸 。如果你喜欢我的文章，欢迎三连给我鼓励和支持：👍点赞 📁 关注 💬评论，我会给大家带来更多有用有趣的文章。
原文链接 👉 ，⚡️更新更及时。
欢迎大家添加好友交流。
