VUE-element-from

一.Element form表单

1.1 表单结构

<template>
  <el-form class="" :model="" :rules="" ref="">

   <el-form-item label="">
     <el-input type="" v-model="">
     </el-input>
   </el-form-item>

   <el-form-item label="">
     <el-input type="" v-model="">
     </el-input>
   </el-form-item>
   ...
  </el-form>
</template>

---

1.2 基本表单元素

1.2.1输入框

<el-form-item label="输入框:" style="width: 50px">
    <el-input type="text" v-model="" placeholder="请输入内容">
    </el-input>
</el-form-item>

1.2.2文本框

<el-form-item label="文本框:" style="width: 50px">
    <el-input type="textarea" v-model="">
    </el-input>
</el-form-item>

1.2.3单选框

<el-form-item style="width: 50px" label="单选:">
  <el-radio v-model="" label="男">男</el-radio>
  <el-radio v-model="" label="女">女</el-radio>
</el-form-item>

1.2.4复选框

<el-form-item style="" label-width="50px" label="爱好:">
    <el-checkbox-group v-model="">
        <el-checkbox label="排球"></el-checkbox>
        <el-checkbox label="篮球"></el-checkbox>
        <el-checkbox label="足球"></el-checkbox>
    </el-checkbox-group>
</el-form-item>

1.2.5时间控件

<el-form-item label="时间:" >
      <el-form-item prop="">
        <el-date-picker type="date" placeholder="选择日期" v-model="" style="width: 200px;"></el-date-picker>
      -
        <el-time-picker type="fixed-time" placeholder="选择时间" v-model="" style="width: 200px;"></el-time-picker>
      </el-form-item>
</el-form-item>

1.2.6下拉框

• 普通下拉

<el-form-item style="margin-bottom: 40px;" label-width="95px" label="状态:">
    <el-select class="article-textarea" :rows="1"  v-model="user.xtczzt">
        <el-option value="Y">Y</el-option>
        <el-option value="N">N</el-option>
    </el-select>
</el-form-item>

---

• 下拉单选

<el-form-item style="margin-bottom: 40px;" label-width="155px" label="动态获取:">
    <el-select clearable class="filter-item" style="width: 130px" v-model="listQuery.xtczmc" placeholder="请选择">
        <el-option v-for="item in  list" :key="item.xtczmc" :label="item.xtczmc" :value="item.xtczmc">
        </el-option>
    </el-select>
</el-form-item>

---

• 下拉多选

<el-form-item style="margin-bottom: 40px;" label-width="155px" label="动态获取:">
    <el-select clearable class="filter-item" style="width: 130px" v-model="listQuery.xtczmc" multiple placeholder="请选择">
        <el-option v-for="item in  list" :key="item.xtczmc" :label="item.xtczmc" :value="item.xtczmc">
        </el-option>
    </el-select>
</el-form-item>

注: v-model=”“与后台实体类字段对应,list为fetchQuery对应的后台查询结果,将el-select设置multiple属性即可启用下拉多选;

---

• Cascader级联

<el-form-item style="margin-bottom: 40px;" label-width="85px" label="地址:">
    <el-cascader
            :options="options2"
            @active-item-change="handleItemChange"
            :props="props">
    </el-cascader>
</el-form-item>

注: 只需为 Cascader的options属性指定选项数组即可渲染出一个级联选择器,通过expand-trigger可以定义展开子级菜单的触发方式,不写默认click触发,设置hover触发(expand-trigger=”hover”),还可在数据源中设置disable字段来禁用选项,显示方式和默认值等.

---

• Transfer 穿梭框

<el-form-item style="margin-bottom: 40px;" label-width="85px" label="穿梭框:">
    <el-transfer filterabl :filter-method="filterMethod"
        filter-placeholder="请输入城市拼音"
        v-model="value2" 
        :data="data2"
        :titles="['一线城市', '二线城市']"
        :button-texts="['荣升一线', '滚去二线']">
    </el-transfer>
</el-form-item>

注: 设置 filterable 为 true 即可开启搜索模式。默认情况下，若数据项的 label 属性包含搜索关键字，则会在搜索结果中显示。你也可以使用 filter-method 定义自己的搜索逻辑;filter-method 接收一个方法，当搜索关键字变化时，会将当前的关键字和每个数据项传给该方法。若方法返回 true，则会在搜索结果中显示对应的数据项;还可以使用 titles、button-texts、render-content 和 format 属性分别对列表标题文案、按钮文案、数据项的渲染函数和列表顶部的勾选状态文案进行自定义.

---

附部分代码:

提交表单:

<el-form-item>
          <el-button type="primary" @click="savetest">保存</el-button>
</el-form-item>

<script>
import { fetchCreate, fetchQuery, fetchSaveTest} from '@/api/user'
...
export default {
data() {
    const generateData2 = _ => {
        const data = []
        const cities = ['上海', '北京', '广州', '深圳', '南京', '西安', '成都']
        const pinyin = ['shanghai', 'beijing', 'guangzhou', 'shenzhen', 'nanjing', 'xian', 'chengdu']
        cities.forEach((city, index) => {
          data.push({
            label: city,
            key: index,
            pinyin: pinyin[index]
          })
        })
        return data
      }

    return {
      list: null,
      total: null,
      listLoading: true,
      listQuery: {
        page: 1,
        limit: 20,
        idxtm01: 0,
        xtczmc: undefined,
        xtczzt: undefined
      },

      options2: [{
          label: '江苏',
          cities: []
        }, {
          label: '广东',
          cities: []
        }],
      props: {
          value: 'label',
          children: 'cities'
        },

      data2: generateData2(),
      value2: [],
      filterMethod(query, item) {
      return item.pinyin.indexOf(query) > -1
        },

      user: {
        domains: [{
            value: ''
          }],
        xtczdm: '',
        xtczmc: '',
        xtczkl: '',
        date: '',
        time: '',
        xtczzt: '',
        xtczxw: '',
        xtczdx: '',
        checkList: [],
        fileList: [],
        textarea: ''
      },
      ...
      created() {
    this.getList()
  },

  methods: {
    getList() {
      this.listLoading = true
      console.log(JSON.stringify(this.listQuery))
      fetchQuery(this.listQuery).then(response => {
        this.list = response.data.body.data
        console.log(this.list)
        this.total = response.data.body.total
        console.log(this.total)
        this.listLoading = false
      })
    },

    handleItemChange(val) {
        console.log('active item:', val)
        setTimeout(_ => {
          if (val.indexOf('江苏') > -1 && !this.options2[0].cities.length) {
            this.options2[0].cities = [{
              label: '南京'
            }]
          } else if (val.indexOf('广东') > -1 && !this.options2[1].cities.length) {
            this.options2[1].cities = [{
              label: '深圳'
            }]
          }
        }, 300)
      },

    savetest() {
      console.log(JSON.stringify(this.user))
      // 表单验证方法
      this.$refs.user.validate(function(result) {
        if (result) {
          // 验证通过,调用module里的setUserInfo方法
          fetchSaveTest(this.user).then(response => {
            var resmeta = response.data.meta
            if (resmeta.status !== 'success') {
              this.$notify({
                title: '操作失败',
                message: resmeta.message,
                type: 'error',
                duration: 2000
              })
            } else {
              this.list.unshift(this.user)
              this.dialogFormVisible = false
              this.$notify({
                title: '成功',
                message: '创建成功',
                type: 'success',
                duration: 2000
              })
              this.getList()
            }
          })
        } else {
        }
      }.bind(this))
    },
</script>

export function fetchQuery(obj) {
    return fetch({
        url: '/user/query',
        method: 'post',
        responseType: 'json',
        headers: { 'content-Type': 'application/json' },
        data: JSON.stringify(obj)
    })
}

export function fetchSaveTest(obj) {
    return fetch({
        url: '/user/savetest',
        method: 'post',
        responseType: 'json',
        headers: { 'content-Type': 'application/json' },
        data: JSON.stringify(obj)
    })
 }
}
部分后台代码:
@RequestMapping(value = "/query", method = RequestMethod.POST)  
    public RestResponse query(@RequestBody User user) throws MyException { 
        return new RestResponse().successQuery(userService.find(user,user.getPage(),user.getLimit()));
    } 

    @RequestMapping(value = "/savetest", method = RequestMethod.POST)  
    public RestResponse test(@RequestBody User user) throws MyException { 
         System.out.println("进入后台");
         System.out.println(user.getXtczmc());
         return new RestResponse().success(); 
    } 

后台通过对象获取相应表单元素

---

更多元素及样式详情请移步Element官网form组件