添加必填控制

src/views/message/modelForm.vue

@@ -89,6 +89,7 @@
                 }
                 /deep/.el-form-item__label{
                         float: none;
+                        font-weight: bold;
                     }
                 &.text{
                     /deep/.el-form-item__content{
@@ -155,9 +156,25 @@
             .survey_logo{
                 width:145px;
                 position: relative;
-                top:15px;
+                // top:15px;
                 left: 20px;
             }
+            .item_require{
+                position: absolute;
+                top:0px;
+                right:35px!important;
+                /deep/.el-checkbox__label{
+                    padding-left:5px;
+                    // color:red;
+                }
+            }
+            .require::before{
+                content: "*";
+                color: #f56c6c;
+                margin-right: 4px;
+                position:absolute;
+                left:-10px;
+            }
        }
    }
 </style>
@@ -217,27 +234,29 @@
                     <!-- handle=".dargBtn"  触发拖拽事件的按钮类名 filter=".undraggable" 不可拖拽的元素的类名 -->
                     <vuedraggable class="wrapper" v-model="widgetList" handle=".dargBtn">
                     <transition-group>
-                    <el-form-item v-for="(item,index) in widgetList" :key="index">
+                    <el-form-item v-for="(item,index) in widgetList" :key="index" :prop="item.label">
                         <section v-if="item.type=='input'">
-                            <el-input :readonly="item.edit" v-model="item.label" :class="item.edit?'edit_label':''"></el-input>
+                            <el-input :readonly="item.edit" v-model="item.label" :class="[item.edit?'edit_label':'',item.require?'require':'']"></el-input>
                             <el-input placeholder='请输入' v-model="item.placeholder"></el-input>
                             <font>
+                                 <el-checkbox class="item_require" v-model="item.require">必填</el-checkbox>
                                  <span @click="item.edit=!item.edit">{{item.edit?'编辑':'保存'}}</span> 
                                  <span @click="widgetList.splice(index,1)">删除</span>
                             </font>
                             <el-button type='primary' class='dargBtn drag'>拖拽移动顺序</el-button>
                         </section>
                         <section v-if="item.type=='textarea'">
-                            <el-input :readonly="item.edit" v-model="item.label" :class="item.edit?'edit_label':''"></el-input>
+                            <el-input :readonly="item.edit" v-model="item.label" :class="[item.edit?'edit_label':'',item.require?'require':'']"></el-input>
                             <el-input type="textarea" placeholder='请输入' v-model="item.placeholder"></el-input>
                             <font>
+                                 <el-checkbox class="item_require" v-model="item.require">必填</el-checkbox>
                                  <span @click="item.edit=!item.edit">{{item.edit?'编辑':'保存'}}</span> 
                                  <span @click="widgetList.splice(index,1)">删除</span>
                             </font>
                             <el-button type='primary' class='dargBtn drag'>拖拽移动顺序</el-button>
                         </section>
                         <section v-if="item.type=='radio'">
-                            <el-input :readonly="item.edit" v-model="item.label" :class="item.edit?'edit_label':''"></el-input>
+                            <el-input :readonly="item.edit" v-model="item.label" :class="[item.edit?'edit_label':'',item.require?'require':'']"></el-input>
                             <el-radio-group>
                                 <el-radio :label="iitem.label" v-for="(iitem,index) in item.items" :key="index">
                                     <el-input :readonly="item.edit" v-model="iitem.label" :class="item.edit?'edit_label':''"></el-input>
@@ -247,13 +266,14 @@
                                 </el-radio>
                             </el-radio-group>
                             <font>
+                                 <el-checkbox class="item_require" v-model="item.require">必填</el-checkbox>
                                  <span @click="item.edit=!item.edit">{{item.edit?'编辑':'保存'}}</span> 
                                  <span @click="widgetList.splice(index,1)">删除</span>
                             </font>
                             <el-button type='primary' class='dargBtn drag'>拖拽移动顺序</el-button>
                         </section>
                         <section v-if="item.type=='checkbox'">
-                            <el-input :readonly="item.edit" v-model="item.label" :class="item.edit?'edit_label':''"></el-input>
+                            <el-input :readonly="item.edit" v-model="item.label" :class="[item.edit?'edit_label':'',item.require?'require':'']"></el-input>
                             <el-radio-group>
                                 <el-checkbox :label="iitem.label" v-for="(iitem,index) in item.items" :key="index">
                                     <el-input :readonly="item.edit" v-model="iitem.label" :class="item.edit?'edit_label':''"></el-input>
@@ -263,6 +283,7 @@
                                 </el-checkbox>
                             </el-radio-group>
                             <font>
+                                <el-checkbox class="item_require" v-model="item.require">必填</el-checkbox>
                                  <span @click="item.edit=!item.edit">{{item.edit?'编辑':'保存'}}</span> 
                                  <span @click="widgetList.splice(index,1)">删除</span>
                             </font>
@@ -319,12 +340,12 @@
                         <h5 align='center' class="tpl_title">{{title}}</h5>
                         <el-form ref="form" :model="form" class="tpl_form over_y">
                             <el-form-item v-for="(item,index) in widgetList" :key="index" :label="item.label">
-                                <el-input v-if="item.type=='input'" v-model="form.label" :placeholder="item.placeholder"></el-input>
-                                <el-input v-if="item.type=='textarea'" type="textarea" v-model="form.label" :placeholder="item.placeholder"></el-input>
-                                <el-radio-group v-if="item.type=='radio'">
+                                <el-input :class="item.require?'require':''" v-if="item.type=='input'" v-model="form.label" :placeholder="item.placeholder"></el-input>
+                                <el-input :class="item.require?'require':''" v-if="item.type=='textarea'" type="textarea" v-model="form.label" :placeholder="item.placeholder"></el-input>
+                                <el-radio-group v-if="item.type=='radio'" :class="item.require?'require':''">
                                     <el-radio :label="iitem.label" v-for="(iitem,index) in item.items" :key="index">{{iitem.label}}</el-radio>
                                 </el-radio-group>
-                                <el-radio-group v-if="item.type=='checkbox'">
+                                <el-radio-group v-if="item.type=='checkbox'" :class="item.require?'require':''">
                                     <el-checkbox :label="iitem.label+'22'" v-for="(iitem,index) in item.items" :key="index">{{iitem.label}}</el-checkbox>
                                 </el-radio-group>
                                 <el-upload