Vue中的vxe-table教程19-表单的使用
效果图：1. index.html代码<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><script src="https://cdn.jsdelivr.net/npm/vue"></script&g
·
效果图：
1. index.html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://cdn.jsdelivr.net/npm/xe-utils"></script>
<script src="https://cdn.jsdelivr.net/npm/vxe-table"></script>
<!-- 使用图标需引入图标对应的css文件即可使用-->
<!-- 下载地址：http://www.fontawesome.com.cn/-->
<link rel="stylesheet" href="./css/font-awesome.css">
<!-- 使用 cdn 引用方式需要注意是否锁定版本，默认指向最新版本 -->
</head>
<body>
<div id="app">
<template>
<div style="padding: 0 50px 0 50px">
<!-- 表单1-->
<p style="width:400px">
<vxe-form
title-colon
ref="xForm"
class="my-form2"
title-align="right"
title-width="100"
:data="formData2"
:rules="formRules2"
:loading="loading2">
<vxe-form-item title="名称" span="24">
<template v-slot>{{ formData2.name }}</template>
</vxe-form-item>
<vxe-form-item title="昵称" span="24">
<template v-slot>{{ formData2.nickname }}</template>
</vxe-form-item>
<vxe-form-item title="性别" field="sex" span="24">
<template v-slot="scope">
<vxe-select v-model="formData2.sex" placeholder="请选择性别" clearable
@change="$refs.xForm.updateStatus(scope)">
<vxe-option value="1" label="女"></vxe-option>
<vxe-option value="2" label="男"></vxe-option>
</vxe-select>
</template>
</vxe-form-item>
<vxe-form-item title="年龄" field="age" span="24">
<template v-slot>
<vxe-input v-model="formData2.age" type="integer" placeholder="请输入年龄" clearable></vxe-input>
</template>
</vxe-form-item>
<vxe-form-item title="日期" field="date" span="24">
<template v-slot>
<vxe-input v-model="formData2.date" type="date" placeholder="请选择日期" clearable></vxe-input>
</template>
</vxe-form-item>
<vxe-form-item title="地址" field="address" span="24">
<template v-slot>
<vxe-textarea v-model="formData2.address" placeholder="请输入地址" clearable></vxe-textarea>
</template>
</vxe-form-item>
<vxe-form-item align="center" span="24">
<template v-slot>
<vxe-button type="submit" status="primary">基本表单</vxe-button>
<vxe-button type="reset">重置</vxe-button>
</template>
</vxe-form-item>
</vxe-form>
</p>
<!-- 表单2-->
<p style="width:90%">
<vxe-form :data="formData3" title-align="right" title-width="100" prevent-submit title-colon>
<vxe-form-item title="名称" field="name" span="8">
<template v-slot>
<vxe-input v-model="formData3.name" placeholder="请输入名称" clearable></vxe-input>
</template>
</vxe-form-item>
<vxe-form-item title="昵称" field="nickname" span="8"
:title-prefix="{ message: '请输入汉字！', icon: 'fa fa-exclamation-circle' }">
<template v-slot>
<vxe-input v-model="formData3.nickname" placeholder="请输入昵称" clearable></vxe-input>
</template>
</vxe-form-item>
<vxe-form-item title="性别" field="sex" span="8">
<template v-slot>
<vxe-select v-model="formData3.sex" placeholder="请选择性别" clearable>
<vxe-option value="1" label="女"></vxe-option>
<vxe-option value="2" label="男"></vxe-option>
</vxe-select>
</template>
</vxe-form-item>
<vxe-form-item title="年龄" field="age" span="8"
:title-prefix="{ message: '请输入数值！', icon: 'fa fa-info-circle' }">
<template v-slot>
<vxe-input v-model="formData3.age" type="integer" placeholder="请输入年龄" clearable></vxe-input>
</template>
</vxe-form-item>
<vxe-form-item title="状态" field="status" span="8">
<template v-slot>
<vxe-select v-model="formData3.status" placeholder="请选择状态" clearable>
<vxe-option value="0" label="失败"></vxe-option>
<vxe-option value="1" label="成功"></vxe-option>
</vxe-select>
</template>
</vxe-form-item>
<vxe-form-item title="是否禁用" field="active" span="8">
<template v-slot>
<vxe-switch v-model="formData3.active" open-label="是" close-label="否"></vxe-switch>
</template>
</vxe-form-item>
<vxe-form-item title="体重" field="weight" span="8" folding>
<template v-slot>
<vxe-input v-model="formData3.weight" type="number" placeholder="请输入体重，单位kg"
clearable></vxe-input>
</template>
</vxe-form-item>
<vxe-form-item title="日期" field="date" span="8" folding>
<template v-slot>
<vxe-input v-model="formData3.date" type="date" placeholder="请选择日期" clearable></vxe-input>
</template>
</vxe-form-item>
<vxe-form-item title="是否单身" field="single" span="8" folding>
<template v-slot>
<vxe-radio-group v-model="formData3.single">
<vxe-radio label="1">是</vxe-radio>
<vxe-radio label="0">否</vxe-radio>
</vxe-radio-group>
</template>
</vxe-form-item>
<vxe-form-item title="兴趣爱好" field="flagList" span="8" folding>
<template v-slot>
<vxe-checkbox-group v-model="formData3.flagList">
<vxe-checkbox label="1">爬山</vxe-checkbox>
<vxe-checkbox label="2">跑步</vxe-checkbox>
<vxe-checkbox label="3">听歌</vxe-checkbox>
</vxe-checkbox-group>
</template>
</vxe-form-item>
<vxe-form-item align="center" span="24" collapse-node>
<template v-slot>
<vxe-button status="primary" @click="">手动提交方式</vxe-button>
<vxe-button @click="">重置</vxe-button>
</template>
</vxe-form-item>
</vxe-form>
</p>
</div>
</template>
</div>
</body>
<script src="./js/main.js"></script>
<link rel="stylesheet" href="./css/main.css">
</html>
2. main.css代码
@import url("https://cdn.jsdelivr.net/npm/vxe-table/lib/style.css");
.vxe-textarea--inner {
line-height: inherit;
}
3. main.js代码
var Main = {
data() {
return {
tableData: [],
loading2: false,
formData2: {
name: 'test1',
nickname: 'Testing',
sex: '',
age: 26,
date: null,
address: null
},
formRules2: {
name: [
{required: true, message: '请输入名称'},
{min: 3, max: 5, message: '长度在 3 到 5 个字符'}
],
nickname: [
{required: true, message: '请输入昵称'}
],
sex: [
{required: true, message: '请选择性别'}
]
},
formData3: {
name: '',
nickname: '',
sex: '',
age: 30,
status: '1',
weight: null,
date: null,
active: false,
single: '1',
flagList: []
},
}
},
created() {
},
methods: {
}
};
var app = new Vue(Main).$mount('#app');
前往低代码交流专区
更多推荐
2
0- 0
已为社区贡献18条内容
所有评论(0)