Vue中的vxe-table教程19-表单的使⽤效果图：
1. index.html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="cdn.jsdelivr/npm/vue"></script>
<script src="cdn.jsdelivr/npm/xe-utils"></script>
<script src="cdn.jsdelivr/npm/vxe-table"></script>
<!-- 使⽤图标需引⼊图标对应的css⽂件即可使⽤-->
<!-- 下载地址：www.fontawesome/-->
<link rel="stylesheet" href="./css/font-awesome.css">
<!-- 使⽤ cdn 引⽤⽅式需要注意是否锁定版本，默认指向最新版本 -->
</head>
<body>
<div id="app">
<template>
<div >
<!-- 表单1-->
<p >
<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>
<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 >
<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>
htmlradio多选怎么用<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>
<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("cdn.jsdelivr/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');
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论