element表单组件代码，复制即用

莓莓hoho~

于 2024-08-23 14:18:03 发布

阅读量183

点赞数 2

文章标签： vue.js elementui

本文链接：https://blog.csdn.net/qq_48647907/article/details/141464037

版权

1、下拉框（多条数据）

         <el-row>
            <el-col :span="12">
                   <el-form-item label="学校" prop="xxdm">
                       <el-select v-model="formData.xxdm"  placeholder="请选择" @change="chooseSchool">
                        <el-option
                        v-for="item in getSchoolList"
                        :key="item.yxdm"
                        :label="item.xxmc"
                        :value="item.yxdm"
                      ></el-option>
                       </el-select>
                   </el-form-item>
                 </el-col>
          </el-row> 
//change方法
 const chooseSchool=(val)=>{
   formData.value.xxmc= getSchoolList.value.filter(function(item) {
        return item.yxdm === val;
    })[0].xxmc;

  }

2、下拉框（数据少）

<el-row> 
     <el-col :span="12">
          <el-form-item label="性别" prop="sex">
          <el-select  class="sin"  v-model="queryParams.sex"  placeholder="不限男女" >
            <el-option label="不限男女" :value="null" key="2"></el-option>
            <el-option label="女" value="0" key="0"></el-option>
            <el-option label="男" value="1" key="1"></el-option>
          </el-select>
        </el-form-item>
    </el-col>
 </el-row>

3、单选框

   <el-row>
        <el-col :span="12">
          <el-form-item label="性别" prop="xb" >
            <el-radio-group v-model="formData.xb" style="width: 100%;">
              <el-radio :label="0">女</el-radio>
              <el-radio :label="1">男</el-radio>
              <el-radio :label="2">未知</el-radio>
            </el-radio-group>
          </el-form-item>
          </el-col>
   </el-row>

效果图
在这里插入图片描述

4、文本域

 <el-row>
            <el-col :span="24">
              <el-form-item label="说明" prop="description">
                <el-input
                  placeholder="请输入说明"
                  type="textarea"
                  v-model="formData.description"
                  :rows="3"
                  maxlength="200"
                  show-word-limit
                /> </el-form-item
            ></el-col>
          </el-row>

效果图
在这里插入图片描述

5、文本框

 <el-row>
            <el-col :span="12">
              <el-form-item label="姓名码" prop="xm">
                <el-input
                  placeholder="请输入"
                  v-model="formData.xm"
                /> </el-form-item
            ></el-col>
          </el-row>

6、时间选择器

 <el-row>
            <el-col :span="12">
                <el-form-item label="违纪时间" prop="wzwjsj" label-width="120">
                           <el-date-picker
                           v-model="form.wzwjsj"
                           type="datetime"
                           format="YYYY/MM/DD HH:mm:ss"
                           value-format="YYYY-MM-DD HH:mm:ss"
                           placeholder="违纪时间"
                           />
                    </el-form-item>
              </el-col>
           
           </el-row>