表单项插槽

默认插槽

<template>
  <ele-form
    v-model="formData"
    :formDesc="formDesc"
    label-position="top"
  >
    <!-- 默认插槽, 将会作为表单的第1项 -->
    <!-- 此时表单有两个表单项 -->
    <!-- 自定义者,如需要label,需要 el-form-item 组件 包裹-->
    <el-form-item
      label="年龄"
      label-position="top"
    >
      <el-input-number v-model="formData.age"></el-input-number>
    </el-form-item>
  </ele-form>
</template>

<script>
export default {
  data () {
    return {
      formData: {
        age: 20,
        name: '马超'
      },
      // 这里只有一项
      formDesc: {
        name: {
          type: 'input',
          label: '姓名'
        }
      }
    }
  }
}
</script>

image.png


具名插槽-默认有包裹

<template>
  <ele-form
    v-model="formData"
    :formDesc="formDesc"
    label-position="top"
  >
    <template v-slot:age="{ desc, data, field, formData }">
      <!-- 插槽内容有el-form-item组件包裹 -->
      <el-input-number v-model="formData.age"></el-input-number>
    </template>
  </ele-form>
</template>

<script>
export default {
  data () {
    return {
      formData: {
        age: 20,
        name: '马超'
      },
      // 这里有两项
      formDesc: {
        age: {
          type: 'number',
          label: '年龄'
        },
        name: {
          type: 'input',
          label: '姓名'
        }
      }
    }
  }
}
</script>

image.png


具名插槽-默认无包裹


<template>
  <ele-form v-model="formData" :formDesc="formDesc">
    <template v-slot:age-wrapper>
      <!-- 如果需要更自由定义表单项,且不需要el-form-item的包裹,可以使用formItem的key加上[-wrapper] -->
      <!-- 例如:age-wrapper 或者 name-wrapper 等 -->
      <div style="margin: 50px;">
        <el-input-number v-model="formData.age"></el-input-number>
      </div>
    </template>
  </ele-form>
</template>

<script>
export default {
  data () {
    return {
      formData: {
        age: 20,
        name: '马超'
      },
      // 这里有两项
      formDesc: {
        age: {
          type: 'number',
          label: '年龄'
        },
        name: {
          type: 'input',
          label: '姓名'
        }
      }
    }
  }
}
</script>


image.png



表单区按钮

<template>
  <ele-form
    v-model="formData"
    :formDesc="formDesc"
    label-position="top"
  >
    <template v-slot:form-btn="{ btns }">
      <el-button
        @click="handleSubmit"
        type="primary"
      >立即创建</el-button>
      <el-button @click="handleCancel">取消</el-button>
    </template>
  </ele-form>
</template>

<script>
export default {
  data () {
    return {
      formData: {
        age: 20,
        name: '马超'
      },
      formDesc: {
        age: {
          type: 'number',
          label: '年龄'
        },
        name: {
          type: 'input',
          label: '姓名'
        }
      }
    }
  },
  methods: {
    handleCancel () {
      console.log('取消')
    },
    handleSubmit () {
      console.log(this.formData)
    }
  }
}
</script>

image.png