element UI 常用表单组件基本配置

element UI常用表单组件基本配置

日期时间范围

需要添加两个format

<el-col :span="6">
  <el-form-item label="时间" prop="time">
     <el-date-picker v-model.trim="time" type="datetimerange" range-separator="" :editable="false" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss" :default-time="['00:00:00', '23:59:59']" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
  </el-form-item>
</el-col>

日期时间

需要添加两个format

<el-date-picker v-model="scope.row.time" type="datetime" placeholder="选择日期时间" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>

重置表单

<el-form ref="queryForm"></el-form>
<span class="btnReset big_btn_false" @click="resetForm('queryForm')">重置</span>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要根据配置文件动态加载element ui表单,可以按照以下步骤进行操作: 1. 首先,在项目中引入Element UI组件库。 2. 然后,根据配置文件中的数据动态生成表单的数据模型。 3. 根据数据模型生成表单的代码,可以使用Vue的动态组件来实现。 4. 最后,将生成的表单组件挂载到页面上。 具体实现方式可以参考以下代码: ``` <template> <el-form :model="formData" label-width="80px"> <el-form-item v-for="item in formItems" :label="item.label" :key="item.prop"> <component :is="item.type" :prop="item.prop" :options="item.options" v-model="formData[item.prop]"></component> </el-form-item> </el-form> </template> <script> export default { data() { return { formData: {}, formItems: [] // 从配置文件中读取的表单项信息 } }, mounted() { this.generateForm() }, methods: { generateForm() { let formItems = this.formItems formItems.forEach(item => { if (item.type === 'input') { item.component = 'el-input' } else if (item.type === 'select') { item.component = 'el-select' } else if (item.type === 'date') { item.component = 'el-date-picker' } }) this.formItems = formItems } }, components: { 'el-input': () => import('element-ui/lib/input'), 'el-select': () => import('element-ui/lib/select'), 'el-date-picker': () => import('element-ui/lib/date-picker') } } </script> ``` 在上面的代码中,我们首先定义了一个formData对象,用于存储表单数据,然后定义了一个formItems数组,用于存储从配置文件中读取的表单项信息。 接着,在mounted钩子函数中调用generateForm方法,该方法通过遍历formItems数组,根据不同的表单类型,将对应的组件名称赋值给item.component属性。 最后,在模板中使用动态组件来生成表单项,通过v-for遍历formItems数组,根据不同的表单类型,使用不同的组件来渲染表单项。 需要注意的是,在使用动态组件时,需要将组件名称作为字符串传递给component的is属性,同时将表单项的prop属性作为v-model的绑定值,这样才能正确地将表单数据与formData对象进行双向绑定。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值