vue element編輯框根據(jù)值動態(tài)確認是否是必填項required true or false問題
更新時間：2026年04月23日 10:01:56 作者：Pisces_224
該文章主要介紹了在編輯數(shù)據(jù)時,根據(jù)是否有時間數(shù)據(jù)來決定某項是否為必填項,作者提供了一個簡單的解決方法,并分享了HTML表單代碼和校驗規(guī)則,最后表示希望對讀者有所幫助
如題
最近遇到個問題，就是在編輯某一項數(shù)據(jù)時，分兩種情況：一種是沒有時間數(shù)據(jù)的，另一種是有時間數(shù)據(jù)的。要求是當時間數(shù)據(jù)有值時該項為必填項；值為空時該值為非必填項。
很簡單請看下面：
解決
如圖：
這兩項當前值為空，此時兩項為 非必填項（無小紅點）；
這兩項有值，為必填項。
代碼如下
form表單：
<el-form-item label="生產(chǎn)日期" prop="manufacture_date"
:rules="editRuleForm.manufacture_date === null">
<el-date-picker
v-model="editRuleForm.manufacture_date"
type="date"
:value-format="'yyyy-MM-dd'"
placeholder="生產(chǎn)日期"
>
</el-date-picker>
</el-form-item>
<el-form-item label="失效日期" prop="expire_date"
:rules="editRuleForm.expire_date === null">
<el-date-picker
v-model="editRuleForm.expire_date"
type="date"
:value-format="'yyyy-MM-dd'"
placeholder="失效日期">
</el-date-picker>
</el-form-item>重點是下面這一句：
:rules="editRuleForm.manufacture_date === null"
校驗規(guī)則：
就正常規(guī)則
<script>
export default {
data() {
return {
editRuleForm: {}, //修改表單數(shù)據(jù)
editRules: {
manufacture_date: [
{required: true, message: "請輸入生產(chǎn)日期", trigger: "blur"},
],
expire_date: [
{required: true, message: "請輸入失效日期", trigger: "blur"},
],
}
}
}
是不是很簡單，哈哈哈
總結
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
在Vue.js開發(fā)中,我們經(jīng)常需要創(chuàng)建可復用的組件,這些組件可能會有自己的樣式規(guī)則,而有時我們希望父組件能夠影響子組件的樣式,本文將詳細介紹如何使用v-deep以及一些相關的最佳實踐,需要的朋友可以參考下2024-10-10
本篇文章主要介紹了Vue.use自定義自己的全局組件，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-06-06
這篇文章主要介紹了vue3?使用setup語法糖實現(xiàn)分類管理,本次模塊使用 vue3+element-plus 實現(xiàn)一個新聞站的后臺分類管理模塊，其中新增、編輯采用對話框方式公用一個表單，需要的朋友可以參考下2022-08-08
vue2.0+ 從插件開發(fā)到npm發(fā)布的示例代碼
這篇文章主要介紹了vue2.0+ 從插件開發(fā)到npm發(fā)布的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-04-04
在本篇文章里小編給大家分享的是一篇關于vue中get和post請求的區(qū)別點總結內(nèi)容，對此有興趣的朋友們可以跟著學習下。2021-12-12
本篇文章主要介紹了解決Vue固定滾動位置的處理辦法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-07-07
這篇文章主要介紹了仿vue-cli搭建屬于自己的腳手架的方法步驟，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-04-04
本篇文章主要介紹了在Vue中使用Compass的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-03-03
vue鼠標hover(懸停)改變background-color移入變色問題
這篇文章主要介紹了vue鼠標hover(懸停)改變background-color移入變色問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
解決VUE項目在IIS部署出現(xiàn)：Uncaught SyntaxError: Unexpected&n
這篇文章介紹了解決VUE項目在IIS部署出現(xiàn)：Uncaught SyntaxError: Unexpected token ＜ 報錯的方法，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-04-04