form 组件介绍

form-container 基础组件介绍

国家

搜索关键字

<template>
  <form-container :model="form" :api="loadData" inline>
    <el-form-item prop="country" label="国家">
      <el-input v-model="form.country"></el-input>
    </el-form-item>
    <el-form-item prop="value" label="搜索关键字">
      <el-input v-model="form.value"></el-input>
    </el-form-item>
  </form-container>
</template>
<script>
export default {
  data(){
    return {
      form: {
        value: null,
        country: null
      }
    }
  },
  methods: {
    async loadData(form) {
      console.log('search success')
      console.log(form)
    }
  }
}
</script>

search-table 组件介绍

关键字

暂无数据

共 0 条

• 15条/页
• 20条/页
• 30条/页
• 40条/页
• 50条/页

无数据

• 1

前往

页

<template>
  <search-table ref="searchTable" :form="form" :api="remoteApi">
    <template slot="form">
      <el-form-item prop="value" label="关键字">
        <el-input v-model="form.value"></el-input>
      </el-form-item>
    </template>
    <template>
      <el-button style="width: 100px" type="primary">创建表单</el-button>
      <br/>
    </template>
    <template slot="table">
      <el-table-column prop="name" label="姓名"/>
      <el-table-column prop="age" label="年龄"/>
    </template>
  </search-table>
</template>
<script>
export default {
  data(){
    return {
      form: {
        value: null
      }
    }
  },
  mounted(){
    this.$refs.searchTable.search()
  },
  methods: {
    async remoteApi(form){
      console.log(form)
      return {
        data: [
          {name: 'xiaoming', age: '18'}
        ]
      }
    }
  }
}
</script>

form-dialog 组件介绍

add

<template>
<div>
  <el-button @click="visible = true">打开弹窗</el-button>
  <form-dialog 
    :options="options" 
    :form="form" 
    :api="remoteApi"
    :events="events"
    :visible.sync="visible">
    <template>
      <el-form-item
        label="活动名称" 
        prop="name" 
        :rules="[{ required: true, message: '请输入活动名称', trigger: 'blur' },]">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item
        label="活动地点" 
        prop="area" 
        :rules="[{ required: true, message: '请输入活动地点', trigger: 'blur' },]">
        <el-input v-model="form.area"></el-input>
      </el-form-item>
    </template>
  </form-dialog>
</div>
</template>
<script>
export default {
  data(){
    return {
      options: {
        fullscreen: true
      },
      visible: false,
      form: {
        name: null,
        area: null
      },
      events: {
        open: () => {
          console.log('event open')
        }
      }
    }
  },
  methods: {
    async remoteApi(params){
      console.log('params', params)
      return {
        data: [
          {name: 'xiaoming', age: '18'}
        ]
      }
    }
  }
}
</script>

Attributes

参数	说明	类型	默认值
model	表单	Object	--
api	表单提交的api	Function	--
title	弹窗标题	String	--
visible	弹窗状态（打开关闭）	Boolean	false
options	el-dialog 弹窗相关属性	Object	--
events	el-dialog 时间监听	Object{event: Function}	null