1. 首页>
  2. 技术文章>
  3. element-plus表单使用例子

element-plus表单使用例子

1/2/24 4:17:56 PM 浏览 910 评论 0

element-plus

<script setup>
import { ref } from 'vue'
const formData = ref({
  name: 'florent',
  age: 40,
  city: 'New York'
})
</script>
<template>
  <el-row>
    <el-col :span="8">
      <el-form label-position="right" label-width="50px" size="default">
        <el-row>
          <el-col :span="12"><el-form-item label="姓名"><el-input v-model="formData.name"></el-input></el-form-item></el-col>
          <el-col :span="12"><el-form-item label="岁数"><el-input v-model="formData.age"></el-input></el-form-item></el-col>
          <el-col :span="24">
            <el-form-item label="城市">
              <el-radio-group v-model="formData.city">
                <el-radio-button label="New York" />
                <el-radio-button label="Washington" />
                <el-radio-button label="Los Angeles" />
                <el-radio-button label="Chicago" />
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item><el-button type="primary">确定</el-button></el-form-item>
      </el-form>
    </el-col>
    <el-col :span="8"><div>2</div></el-col>
    <el-col :span="8"><div>3</div></el-col>
  </el-row>
</template>
<style scoped>
.line-r {
  border-right: 1px solid var(--el-border-color);
  border-radius: 4px;
}
.el-input{width:150px;}
</style>


网友讨论