10.表单
-- 未经授权禁止转载 --

代码

demo\src\App.vue
    <script setup>
        import { ref } from 'vue'

        const data = ref({
            name: '',
            radio: '',
            checkbox: [],
            date: '',
            select: '',
            multipleSelect: [],
            textarea: ''
        })

        const add = () => {
            console.log(data.value)
        }

        const reset = () => {
            data.value = {
                name: '',
                radio: '',
                checkbox: [],
                date: '',
                select: '',
                multipleSelect: [],
                textarea: ''
            }
        }
    </script>

    <template>
        <el-form label-width="80" style="width: 400px;">
            <el-form-item label="文本框">
                <el-input v-model="data.name" placeholder="请填写名称" />
            </el-form-item>

            <el-form-item label="单选框">
                <el-radio-group v-model="data.radio">
                    <el-radio value="1">前端</el-radio>
                    <el-radio value="2">后端</el-radio>
                    <el-radio value="3">服务端</el-radio>
                </el-radio-group>
            </el-form-item>

            <el-form-item label="复选框">
                <el-checkbox-group v-model="data.checkbox">
                    <el-checkbox value="a">前端</el-checkbox>
                    <el-checkbox value="b">后端</el-checkbox>
                    <el-checkbox value="c">服务端</el-checkbox>
                </el-checkbox-group>
            </el-form-item>

            <el-form-item label="日期时间">
                <el-date-picker v-model="data.date" type="datetime" value-format="YYYY-MM-DD HH:mm:ss" />
            </el-form-item>

            <el-form-item label="下拉框">
                <el-select v-model="data.select" placeholder="请选择">
                    <el-option value="A" label="前端" />
                    <el-option value="B" label="后端" />
                    <el-option value="C" label="服务端" />
                </el-select>
            </el-form-item>

            <el-form-item label="多选框">
                <el-select v-model="data.multipleSelect" multiple placeholder="请选择">
                    <el-option value="AA" label="前端" />
                    <el-option value="BB" label="后端" />
                    <el-option value="CC" label="服务端" />
                </el-select>
            </el-form-item>

            <el-form-item label="文本域">
                <el-input type="textarea" v-model="data.textarea" rows="2" placeholder="请填写内容" />
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="add">添加</el-button>
                <el-button @click="reset">重置</el-button>
            </el-form-item>
        </el-form>
    </template>

    <style scoped>

    </style>