【Vue】vue2vue3项目使用antd
CrazyPanda发表于：2024-04-19 21:07:46浏览：331次
前言
项目研发需要，已经用了两年的ant design pro（react），因为会的人比较少，更多的人在使用vue，所以新项目决定使用antd vue来开发，好在比较熟悉了ant design组件的使用，也算是有一些基础。
ant design 官网https://ant.design/index-cn
antd vue 官网https://www.antdv.com/components/overview-cn 当前版本V4.1.2
vue2项目-引入antd
参考：https://www.antdv.com/docs/vue/getting-started-cn
前提必须安装过：npm install -g @vue/cli
创建vue项目：vue create +项目名，选择vue2进行创建
进入项目：cd+项目名
安装vue-router： npm install vue-router@3.5.3 --save
安装ant-design-vue： npm install ant-design-vue --save
在main.js文件中配置路由和antd：
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import Antd from 'ant-design-vue'
import 'ant-design-vue/dist/antd.css';
Vue.config.productionTip = false
Vue.use(Antd)
Vue.use(router)
new Vue({
el: '#app',
render: h => h(App),
router,
}).$mount('#app')app.vue里引入router-view进行路由管理：
<template>
<div id="app">
<router-view />
</div>
</template>
<script>
export default {
name: 'App',
}
</script>
<style>
</style>在src文件夹下新建一个router文件夹，里面放一个index.js文件：
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
export default new Router({
routes: [{
path: "/",
name: "HelloWorld",
component: () =>
import('../components/HelloWorld.vue'),
meta: {
title: "主页",
}
}]
})
const VueRouterPush = Router.prototype.push
Router.prototype.push = function push(to) {
return VueRouterPush.call(this, to).catch(err => err)
}vue2项目搭建layout案例：
<template>
<a-layout id="components-layout-demo-top-side-2" style="min-height: 100vh;">
<a-layout-header class="header">
<div class="text">后台管理系统</div>
<a-icon
@click="toggleCollapse"
:collapse="isCollapse"
style="fontSize: 20px; color: #fff; margin: auto 20px;"
type="unordered-list"
/>
<a-menu
theme="dark"
v-for="mp in menus"
:key="mp.path"
mode="horizontal"
:default-selected-keys="[$route.path]"
:style="{ lineHeight: '64px' }"
router
>
<a-menu-item
v-if="!mp.children"
:key="mp.path"
@click="handleMenuClick(mp.path)"
:data-path="mp.path"
>
{{ mp.name }}
</a-menu-item>
</a-menu>
<a-icon
style="
fontSize: 45px;
color: #fff;
position: fixed;
right: 30px;
top: 8px;
"
type="user"
/>
</a-layout-header>
<a-layout>
<a-layout-sider
:width="isCollapse ? '55px' : '200px'"
style="background: #fff;"
>
<a-menu mode="inline" :default-selected-keys="[$route.path]">
<template v-for="m in menus">
<template v-if="!m.children">
<a-menu-item
:key="m.path"
:to="m.path"
:data-path="m.path"
@click="handleMenuClick(m.path)"
>
<a-icon type="user" />
{{ m.name }}
</a-menu-item>
</template>
<template v-else>
<a-sub-menu :key="m.path">
<span slot="title">
<a-icon type="user" />
{{ m.name }}
</span>
<a-menu-item
v-for="mc in m.children"
:key="mc.path"
:to="mc.path"
:data-path="mc.path"
@click="handleMenuClick(mc.path)"
>
<a-icon type="user" />
{{ mc.name }}
</a-menu-item>
</a-sub-menu>
</template>
</template>
</a-menu>
</a-layout-sider>
<a-layout style="padding: 0 24px 24px;">
<a-breadcrumb style="margin: 16px 0;">
<a-breadcrumb-item>{{ $route.meta.title }}</a-breadcrumb-item>
</a-breadcrumb>
<a-layout-content
:style="{
background: '#fff',
padding: '24px',
margin: 0,
minHeight: '280px',
}"
>
<router-view></router-view>
</a-layout-content>
</a-layout>
</a-layout>
</a-layout>
</template>
<script>
export default {
name: 'HelloWorld',
data() {
return {
isCollapse: false,
menus: [
{
name: '首页',
id: 0,
path: '/sysMenu',
},
{
name: '系统管理',
id: 1,
children: [
{
name: '系统配置',
id: 3,
path: '/sysSetting',
},
{
name: '菜单管理',
id: 4,
path: '/4',
},
],
},
{
name: '用户管理',
id: 2,
children: [
{
name: '用户列表',
id: 5,
path: '/userList',
},
],
},
],
}
},
methods: {
toggleCollapse() {
this.isCollapse = !this.isCollapse
},
handleMenuClick(path) {
console.log(path, 'path')
if (path !== this.$route.path) {
this.$router.push(path)
}
},
},
}
</script>
<style scoped>
.ant-layout-header {
display: flex;
padding: 0;
}
.text {
color: aliceblue;
width: 170px;
line-height: 33.99px;
text-align: center;
margin: 15px;
background: rgb(24, 34, 77);
}
</style>vue3项目-引入antd：
前提必须安装过：npm install -g @vue/cli
创建vue项目：vue create +项目名，选择vue3进行创建
进入项目：cd+项目名
安装vue-router： npm install vue-router --save
安装ant-design-vue： npm install ant-design-vue --save
在main.js中配置路由和组件：
import { createApp } from 'vue'
import App from './App.vue'
import router from'./router';
import Antd from 'ant-design-vue'
import 'ant-design-vue/dist/antd.css';
import * as Icons from '@ant-design/icons-vue'
const app = createApp(App)
app.use(router)
app.use(Antd)
app.mount('#app')
app.config.globalProperties.$icons = Icons
for (const key in Icons) {
app.component(key, Icons[key])
}app.vue
<template>
<router-view />
</template>
<script>
export default {
name: 'App',
components: {
}
}
</script>
<style>
</style>在src文件夹下新建一个router文件夹，里面放一个index.js文件：
import { createRouter, createWebHashHistory} from "vue-router";
const router = createRouter({
history: createWebHashHistory(),
routes: [{
path: '/',
name: 'myLogin',
component: () =>
import ('../views/myLogin.vue')
},
{
path: '/myHome',
redirect: '/sysMenu',
name: '首页',
component: () =>
import ('../views/myHome.vue'),
children: [{
path: '/sysMenu',
name: '首页',
meta: { title: "首页" },
component: () =>
import ('../views/sysMenu.vue')
},
{
path: '/sysSetting',
name: '系统设置',
meta: { title: "系统管理/系统设置" },
component: () =>
import ('../views/sysSetting.vue')
},
{
path: '/userList',
name: '用户列表',
meta: { title: "用户列表" },
component: () =>
import ('../views/userList.vue')
},
{
path: '/myComponent',
name: 'vue3组件',
meta: { title: "vue3组件" },
component: () =>
import ('../views/myComponent.vue')
}
]
},
]
})
export default routervue3项目搭建layout案例：
<template>
<a-layout id="components-layout-demo-top-side-2" style="min-height: 100vh;">
<a-layout-header class="header">
<div v-if="!isCollapse" class="text">后台管理系统</div>
<component :is="$icons['BarsOutlined']" />
<bars-outlined
@click="toggleCollapse"
:collapse="isCollapse"
style="fontsize: 20px; color: #fff; margin: auto 20px;"
type="unordered-list"
/>
<a-menu
theme="dark"
v-for="m in staterow.menusrow"
:key="m.id"
mode="horizontal"
:selectedKeys="[$route.path]"
:style="{ lineHeight: '64px' }"
>
<a-menu-item :key="m.path">
<router-link :to="m.path" :key="m.path">{{ m.name }}</router-link>
</a-menu-item>
</a-menu>
<component :is="$icons['UserOutlined']" />
<user-outlined
style="
fontSize: 45px;
color: #fff;
position: fixed;
right: 30px;
top: 8px;
"
type="user"
/>
</a-layout-header>
<a-layout>
<a-layout-sider
:width="isCollapse ? '55px' : '200px'"
style="background: #fff; height: 100vh;"
>
<a-menu
mode="inline"
:selectedKeys="[$route.path]"
v-for="m in state.menus"
:key="m.path"
>
<a-menu-item v-if="!m.children" :key="m.path">
<component :is="$icons['AppstoreOutlined']" />
<span>{{ m.name }}</span>
<router-link :to="m.path" :key="m.path"></router-link>
</a-menu-item>
<a-sub-menu v-if="m.children" :key="m.path">
<template #title>
<component :is="$icons['UserOutlined']" />
<span>{{ m.name }}</span>
</template>
<a-menu-item v-for="mc in m.children" :key="mc.path">
<component :is="$icons['FileDoneOutlined']" />
<span>{{ mc.name }}</span>
<router-link :to="mc.path" :key="mc.path"></router-link>
</a-menu-item>
</a-sub-menu>
</a-menu>
</a-layout-sider>
<a-layout style="padding: 0 24px 24px;">
<a-breadcrumb style="margin: 16px 0;">
<a-breadcrumb-item>{{ $route.meta.title }}</a-breadcrumb-item>
</a-breadcrumb>
<a-layout-content
:style="{
background: '#fff',
padding: '24px',
margin: 0,
minHeight: '280px',
}"
>
<router-view></router-view>
</a-layout-content>
</a-layout>
</a-layout>
</a-layout>
</template>
<script>
import { reactive, ref } from 'vue'
export default {
setup() {
const state = reactive({
menus: [
{
name: '首页',
id: 1,
path: '/sysMenu',
},
{
name: '系统管理',
id: 2,
children: [
{
name: '系统配置',
id: 3,
path: '/sysSetting',
},
{
name: '菜单管理',
id: 4,
path: '/4',
},
],
},
],
})
const staterow = reactive({
menusrow: [
{
name: '用户列表',
id: 5,
path: '/userList',
},
{
name: 'vue3组件',
id: 6,
path: '/myComponent',
},
],
})
const isCollapse = ref(false)
const toggleCollapse = () => {
isCollapse.value = !isCollapse.value
}
return {
state,
staterow,
isCollapse,
toggleCollapse,
}
},
}
</script>
<style scoped>
.ant-layout-header {
display: flex;
padding: 0;
}
.text {
color: aliceblue;
width: 170px;
line-height: 33.99px;
text-align: center;
margin: 15px;
background: rgb(24, 34, 77);
}
</style>增删改查案例：
点击新增编辑显示表单,编辑页面拿到row数据，并且添加表单效验
vue2写法：
<template>
<div>
<div class="sousuo">
<a-input style="width:400px" addonBefore="http://" defaultValue="mysite" />
<a-button style="margin-right: 20px;" type="primary">搜索</a-button>
<a-button type="primary" @click="addsyse('add')">新增</a-button>
</div>
<a-table :dataSource="dataSource" bordered :columns="columns">
<template slot="action" slot-scope="text, record">
<span>
<a href="javascript:" @click="addsyse('edit',record)"> 编辑 </a>
<a-divider type="vertical" />
<a href="javascript:" @click="addsyse('dele')"> 删除 </a>
</span>
</template>
</a-table>
<AddSyseting v-if="addcom" ref="sysetting" @refreshDataList="articleList"></AddSyseting>
</div>
</template>
<script>
import AddSyseting from './addSyseting'
export default {
name: 'sysSetting',
components: {
AddSyseting,
},
data() {
return {
addcom: false,
dataSource: [
{
key: 1,
name: 'John Brown sr.',
age: 60,
address: 'New York No. 1 Lake Park',
children: [
{
key: 11,
name: 'John Brown',
age: 42,
address: 'New York No. 2 Lake Park',
},
{
key: 12,
name: 'John Brown jr.',
age: 30,
address: 'New York No. 3 Lake Park',
children: [
{
key: 121,
name: 'Jimmy Brown',
age: 16,
address: 'New York No. 3 Lake Park',
},
],
},
{
key: 13,
name: 'Jim Green sr.',
age: 72,
address: 'London No. 1 Lake Park',
children: [
{
key: 131,
name: 'Jim Green',
age: 42,
address: 'London No. 2 Lake Park',
children: [
{
key: 1311,
name: 'Jim Green jr.',
age: 25,
address: 'London No. 3 Lake Park',
},
{
key: 1312,
name: 'Jimmy Green sr.',
age: 18,
address: 'London No. 4 Lake Park',
},
],
},
],
},
],
},
{
key: 2,
name: 'Joe Black',
age: 32,
address: 'Sydney No. 1 Lake Park',
},
],
columns: [
{
title: 'Name',
dataIndex: 'name',
key: 'name',
},
{
title: 'Age',
dataIndex: 'age',
key: 'age',
width: '12%',
},
{
title: 'Address',
dataIndex: 'address',
width: '30%',
key: 'address',
},
{
title: '操作',
dataIndex: 'action',
scopedSlots: { customRender: 'action' }
}
]
}
},
methods: {
addsyse(type, item) {
if (type == "add") {
this.addcom = true;
this.$nextTick(() => {
this.$refs.sysetting.init(type);
});
}
if (type == "edit") {
this.addcom = true;
this.$nextTick(() => {
this.$refs.sysetting.init(type, item);
});
}
if (type == "dele") {
console.log("你点击了删除");
}
},
articleList() {
console.log("我是父组件传给子组件的方法");
},
}
}
</script><template>
<div>
<a-modal :title="title" :visible="visible" @ok="handleOk" @cancel="handleCancel">
<a-form-model :labelCol="{ span:6 }" :style="{ maxWidth: 600 }" :wrapperCol="{ span: 16 }" :model="form" :rules="rulesRs" ref="ruleForm">
<a-row>
<a-col>
<a-form-model-item label="输入框" prop="username">
<a-input v-model="form.username" placeholder="姓名"></a-input>
</a-form-model-item>
</a-col>
<a-col>
<a-form-model-item label="多选框" prop="chebox" :autoLink="false">
<a-checkbox-group v-model="form.chebox" :options="options" @change="check"></a-checkbox-group>
</a-form-model-item>
</a-col>
<a-col>
<a-form-model-item label="禁用">
<a-input disabled></a-input>
</a-form-model-item>
</a-col>
<a-col>
<a-form-model-item label="开关" prop="checkedval">
<a-switch :checked="form.checkedval" @change="chaswitch"></a-switch>
</a-form-model-item>
</a-col>
<a-col>
<a-form-model-item label="选择器" prop="ruselect">
<a-space>
<a-select style="width:300px" v-model="form.ruselect" @change="chaselect" :options="opselect" />
</a-space>
</a-form-model-item>
</a-col>
<a-col>
<a-form-model-item label="单选" prop="radioval">
<a-radio-group @change="chaRadio" :value="form.radioval">
<a-radio value="1">A</a-radio>
<a-radio value="2">B</a-radio>
</a-radio-group>
</a-form-model-item>
</a-col>
<a-col>
<a-form-model-item label="树形" prop="treevalue">
<a-treeSelect showSearch :value="form.treevalue" bordered allowClear treeDefaultExpandAll @change="chatreeselect" :treeData="treeData" />
</a-form-model-item>
</a-col>
<a-col>
<a-form-model-item label="时间">
<a-calendar v-model="form.rucalendar" @change="chacalendar" />
</a-form-model-item>
</a-col>
<a-col>
<a-form-model-item label="上传">
<a-upload name="avatar" listType="picture-card" className="avatar-uploader" :showUploadList="false" action="https://www.mocky.io/v2/5cc8019d300000980a055e76" @change="chaUpload">
<img :src="form.imageUrl" style="width: '200px' " />
</a-upload>
</a-form-model-item>
</a-col>
</a-row>
</a-form-model>
</a-modal>
</div>
</template>
<script>
export default {
name: 'addsysSeting',
data() {
return {
visible: false,
type: "",
title: "",
form: {
username: "",
chebox: [],
checkedval: null,
radioval: "",
treevalue: "",
rucalendar: ""
},
rulesRs: {
username: [
{
required: true,
message: '请输入姓名',
trigger: 'change'
}
],
chebox: [
{
required: true,
message: '请选择',
trigger: 'change'
}
],
checkedval: [
{
required: true,
message: '请选择开关状态',
trigger: 'change'
}
],
ruselect: [
{
required: true,
message: '请选择ruselect',
trigger: 'change'
}
],
radioval: [
{
required: true,
message: '请选择单选radioval',
trigger: 'change'
}
],
treevalue: [
{
required: true,
message: '请选择树选择',
trigger: 'change'
}
]
},
options: [
{ label: 'Apple', value: 'Apple' },
{ label: 'Pear', value: 'Pear' },
{ label: 'Orange', value: 'Orange' },
],
opselect: [{ value: 'jack', label: 'Jack' },
{ value: 'lucy', label: 'Lucy' },
{ value: 'Yiminghe', label: 'yiminghe' },
{ value: 'disabled', label: 'Disabled',
disabled: true },],
treeData: [
{
value: 'parent 1',
title: 'parent 1',
children: [
{
value: 'parent 1-0',
title: 'parent 1-0',
children: [
{
value: 'leaf1',
title: 'leaf1',
},
{
value: 'leaf2',
title: 'leaf2',
},
],
},
{
value: 'parent 1-1',
title: 'parent 1-1',
children: [
{
value: 'leaf3',
title: <b style={{ color: '#08c' }}>leaf3</b>,
},
],
},
],
},
],
}
},
methods: {
init(type, item) {
this.visible = true;
this.title = "新增"
this.type = type;
if (type == "edit") {
this.title = "编辑"
console.log(item, "item");
}
},
handleOk() {
this.$refs.ruleForm.validate(valid => {
if (!valid) return false; // 校验未全部通过，结束当前提交
if (valid) {
console.log(this.form, "校验全部通过提交给后端");
}
});
},
handleCancel() {
console.log("点击了取消");
this.visible = false;
},
check(e) {
this.form.chebox = e
console.log(this.form.chebox, "多选框选中的");
},
chaswitch(checked) {
this.form.checkedval = checked
console.log(this.form.checkedval, "开关选中的");
},
chaselect(e) {
this.form.ruselect = e
console.log(this.form.ruselect, "选择器选中的");
},
chaRadio(e) {
this.form.radioval = e.target.value
console.log(this.form.radioval, "单选选中的");
},
chatreeselect(e) {
this.form.treevalue = e
console.log(this.form.treevalue, "树选择选中的");
},
chacalendar(value) {
this.form.rucalendar = value.format('YYYY-MM-DD')
console.log(this.form.rucalendar, "选中的时间");
},
chaUpload(e) {
this.form.imageUrl = e
console.log(this.form.imageUrl, "上传照片");
},
}
}
</script>vue3写法：
<template>
<div class="sousuo">
<a-input style="width:400px" addonBefore="http://" defaultValue="mysite" />
<a-button style="margin-right: 20px;" type="primary">搜索</a-button>
<a-button type="primary" @click="addsyse('add')">新增</a-button>
</div>
<AddSyseting v-if="addcom" ref="sysetting"></AddSyseting>
<a-table :dataSource="dataSource" bordered :columns="columns">
<template v-slot:bodyCell="{column,record}">
<template v-if="column.dataIndex==='operation'">
<span>
<a href="javascript:" @click="addsyse('edit',record)"> 编辑 </a>
<a-divider type="vertical" />
<a href="javascript:"> 删除 </a>
</span>
</template>
</template>
</a-table>
</template>
<script setup>
//ref函数创建响应式数据
//nextTick将回调推迟到下一个 DOM 更新周期之后执行
//onMounted()在组件被挂载完成后执行
//getCurrentInstance 获取到组件实例
import { ref, nextTick, onMounted, getCurrentInstance } from "vue";
import AddSyseting from "@/views/addSyseting.vue";
const addcom = ref(false);
let currentInstance = ''
onMounted(() => {
currentInstance = getCurrentInstance()
})
const addsyse = (type, item) => {
if (type == "add") {
addcom.value = true;
nextTick(() => {
currentInstance.ctx.$refs.sysetting.alertMessage(type)
})
}
if (type == "edit") {
addcom.value = true;
nextTick(() => {
currentInstance.ctx.$refs.sysetting.alertMessage(type, item)
})
}
}
const dataSource = [
{
key: 1,
name: 'John Brown sr.',
age: 60,
address: 'New York No. 1 Lake Park',
children: [
{
key: 11,
name: 'John Brown',
age: 42,
address: 'New York No. 2 Lake Park',
},
{
key: 12,
name: 'John Brown jr.',
age: 30,
address: 'New York No. 3 Lake Park',
children: [
{
key: 121,
name: 'Jimmy Brown',
age: 16,
address: 'New York No. 3 Lake Park',
},
],
},
{
key: 13,
name: 'Jim Green sr.',
age: 72,
address: 'London No. 1 Lake Park',
children: [
{
key: 131,
name: 'Jim Green',
age: 42,
address: 'London No. 2 Lake Park',
children: [
{
key: 1311,
name: 'Jim Green jr.',
age: 25,
address: 'London No. 3 Lake Park',
},
{
key: 1312,
name: 'Jimmy Green sr.',
age: 18,
address: 'London No. 4 Lake Park',
},
],
},
],
},
],
},
{
key: 2,
name: 'Joe Black',
age: 32,
address: 'Sydney No. 1 Lake Park',
},
]
const columns = [
{
title: 'Name',
dataIndex: 'name',
key: 'name',
},
{
title: 'Age',
dataIndex: 'age',
key: 'age',
width: '12%',
},
{
title: 'Address',
dataIndex: 'address',
width: '30%',
key: 'address',
},
{
title: '操作',
dataIndex: 'operation',
}
]
</script>
<style scoped>
.sousuo {
display: flex;
}
</style><template>
<a-modal width="85%" :title="title" :visible="visible" @ok="handleOk" @cancel="handleCancel">
<a-form ref="formRef" :model="form" :rules="rules" @keyup.enter="handleOk">
<a-form-item label="输入框" name="username">
<a-input v-model:value="form.username" size="middle" placeholder="姓名"></a-input>
</a-form-item>
<a-form-item label="多选框" name="rucheckbox">
<a-checkbox-group v-model:value="form.rucheckbox" :options="options" @change="check"></a-checkbox-group>
</a-form-item>
<a-form-item label="禁用">
<a-input disabled size="middle"></a-input>
</a-form-item>
<a-form-item label="开关" name="ruswitch">
<a-switch :checked="form.ruswitch" @change="chaswitch"></a-switch>
</a-form-item>
<a-form-item label="选择器" name="ruselect">
<a-space wrap>
<a-select v-model:value="form.ruselect" style="width: 350px" @change="chaselect" :options="opselect" />
</a-space>
</a-form-item>
<a-form-item label="单选" name="ruradio">
<a-radio-group @change="chaRadio" :value="form.ruradio">
<a-radio value="1">A</a-radio>
<a-radio value="2">B</a-radio>
</a-radio-group>
</a-form-item>
<a-form-item label="树选择" name="rutree">
<a-treeSelect showSearch style="width: 350px;" :value="form.rutree" bordered allowClear treeDefaultExpandAll @change="chatreeselect" :treeData="treeData" />
</a-form-item>
<a-form-item label="日历">
<a-calendar @change="chacalendar" />
</a-form-item>
<a-form-item label="上传" name="rupload">
<a-upload name="avatar" listType="picture-card" className="avatar-uploader" :showUploadList="false" action="https://www.mocky.io/v2/5cc8019d300000980a055e76" @change="chaUpload">
<img :src="form.rupload" style="width: '200px' " />
</a-upload>
</a-form-item>
</a-form>
</a-modal>
</template>
<script setup>
//ref函数创建响应式数据
//reactive创建响应式复杂数据
import { ref, reactive, defineExpose } from "vue";
const visible = ref(false);
const title = ref()
function data_form() {
const form = reactive({
username: undefined,
rucheckbox: [],
ruswitch: undefined,
ruselect: [],
ruradio: undefined,
rutree: "",
rupload: ""
})
return form
}
const form = data_form()
const rules = reactive({
username: [
{
required: true,
message: '请输入姓名',
trigger: 'change'
}
],
rucheckbox: [
{
required: true,
message: '请选择',
trigger: 'change'
}
],
ruswitch: [
{
required: true,
message: '请选择状态',
trigger: 'change'
}
],
ruselect: [
{
required: true,
message: '请选择',
trigger: 'change'
}
],
ruradio: [
{
required: true,
message: '请选择',
trigger: 'change'
}
],
rutree: [
{
required: true,
message: '请选择',
trigger: 'change'
}
],
rupload: [
{
required: true,
message: '请上传',
trigger: 'change'
}
],
})
const formRef = ref()
const alertMessage = (type, item) => {
visible.value = true;
title.value = "新增"
if (type == "edit") {
title.value = "编辑"
console.log(item, "item");
}
}
// 通过defineExpose向外暴露获取到父组件那边的alertMessage方法
defineExpose({
alertMessage
})
function handleOk() {
console.log("点击了确定");
formRef.value.validate().then(() => {
console.log(form, "需要提交给后端的form表单数据");
visible.value = false;
})
}
function handleCancel() {
console.log("点击了取消");
visible.value = false;
}
const options = [
{ label: 'Apple', value: 'Apple' },
{ label: 'Pear', value: 'Pear' },
{ label: 'Orange', value: 'Orange' },
];
const check = (e) => {
form.rucheckbox = e
console.log(form.rucheckbox, "多选框选中的");
}
const chaswitch = (checked) => {
form.ruswitch = checked
console.log(form.ruswitch, "开关状态");
}
const opselect = [{ value: 'jack', label: 'Jack' },
{ value: 'lucy', label: 'Lucy' },
{ value: 'Yiminghe', label: 'yiminghe' },
{ value: 'disabled', label: 'Disabled',
disabled: true},]
const chaselect = (e) => {
form.ruselect = e
console.log(form.ruselect, "选择器选中的");
}
const chaRadio = (e) => {
form.ruradio = e.target.value
console.log(form.ruradio, "单选选中的");
}
const treeData = [
{
value: 'parent 1',
title: 'parent 1',
children: [
{
value: 'parent 1-0',
title: 'parent 1-0',
children: [
{
value: 'leaf1',
title: 'leaf1',
},
{
value: 'leaf2',
title: 'leaf2',
},
],
},
{
value: 'parent 1-1',
title: 'parent 1-1',
children: [
{
value: 'leaf3',
title: <b style={{ color: '#08c' }}>leaf3</b>,
},
],
},
],
},
];
const chatreeselect = (e) => {
form.rutree = e
console.log(form.rutree, "树选择选中的");
}
const chacalendar = (value) => {
console.log(value.format('YYYY-MM-DD'), "选中的时间");
}
const chaUpload = (e) => {
form.rupload = e
console.log(form.rupload, "上传照片");
}
</script>vue3中效验也可以直接绑定在form-item标签中：
<a-form-item label="绑定rules" name="name" :rules="[{required:true,message:'请输入姓名'}]">
<a-input v-model:value="form.name" size="middle" placeholder="姓名"></a-input>
</a-form-item>猜你喜欢
- 【Vue】前端框架 Vue3框架 使用总结(一) Vue框架的基础使用
- 目录一、Vue3框架基础1、创建项目2、项目结构3、Vue基础语法4、组件之间通信5、组合式api二、VueRouter的基础使用1、安装2、使用案例3、完整案例步骤4、调优-路由懒加载三、Vuex数据管理1、实现案例 2、更改store状态，同步操作3、store中的计算属性4、redux里的异步操作Action5、模块化管理四、网络请求Vue3官方文档：Vue.js - 渐进式 JavaScript 框架 | Vue.js基础部分见官方文档一、Vue3框架基础1、创建项目安装yar
- 【Vue】vue使用后端提供的接口
- 在 vue 中使用后端接口可通过以下步骤实现：安装 axios 库并导入。使用 axios 对象创建 http 请求，如 get 或 post。使用 data 选项传递数据。处理响应，使用 data 属性访问后端返回的数据。使用 vuex 管理从后端获取的数据，通过组件访问。在 Vue 中使用后端接口在 Vue.js 应用中使用后端提供的接口可以让你与服务器通信，获取和更新数据。本文将介绍如何在 Vue 中使用后端接口。1. 安装 Axios首先，你需要安装 Axios 库，这是一个用于发起 H
- 【VUE】如何查看前端的vue项目是vue2还是vue3项目
- 1. 检查package.json文件在项目的根目录下，打开package.json文件，查找dependencies或devDependencies部分中的vue条目。版本号将告诉你是Vue 2还是Vue 3。例如：Vue 2.x: "vue": "^2.x.x"Vue 3.x: "vue": "^3.x.x"2. 使用Vue Devtools如果项目正在运行，并且你已经安装了Vue Devtools（Vue开发者
- 【Vue】vue2应用与vue3的不同之处
- 上一篇，我使用了vue2创建了一个应用，这次我使用vue3创建一个应用，看一下两者有什么不同。如下，是我用cue3创建的应用目录发现和vue2应用的目录一模一样，然后我用对比工具对比了两者的文件。1. 文件区别下面是package.json文件的区别，首先vue版本不同，对应的扩展组件也不同。下面是main.js的不同然后是APP.vue的不同2. 全局实例改变2.x 全局 API3.x 实例 API (app)Vue.configapp.configVue.config.productionT
- 【Vue】Vue3项目filter.js组件封装
- 1、element-plus(el-table)修改table的行样式export function elTableRowClassName({ row, rowIndex }) { if (rowIndex % 2 != 0) { return 'default-row' &nb
- 【Vue】vue通过class获取dom
- 其实就是操作 html 中的标签的一些能力 我们可以操作哪些内容 获取一个元素 移除一个元素 创建一个元素 向页面里面添加一个元素 给元素绑定一些事件 获取元素的属性给元素添加一些 css 样式 ... DOM 的核心对象就是 docuemnt 对象 document 对象是浏览器内置的一个对象，里面存储着专门用来操作元素的各种方法 DOM： 页面中的标签，我们通过 js 获取到以后，就把这个对象叫做 DOM 对象获取一个元素通过 js 代码来获取页面中的标签获取到以后我们
- 【Vue】Antd Pro Vue的使用（九） —— 抽屉a-drawer的操作按钮设置
- 在antd pro vue2中，a-drawer默认是没有操作按钮的，只有右上角的关闭'X'号，需要自己配置提交和取消按钮提交方法对应@submit方法，取消方法对应@close方法（a-model对应的取消方法是@cancel），都是父页面传过来的方法<a-drawer :title="model ? '编辑类型' : '新建类型'"
- 【Vue】vue.js怎么定义一个组件
- vue.js 中定义组件有三种方法：直接定义在 <script> 标签中并导出组件对象、使用组件工厂函数和 definecomponent 辅助函数创建、使用类定义组件并继承 vue.extend 创建。</script>如何在 Vue.js 中定义组件一、直接定义1. 在 <script></script> 标签中，使用 export default {} 导出组件对象：<code class="html"&g
栏目分类全部>