最近在跟着大神学习vue3的内容，发现之前vue2写的代码可以直接照搬到vue3中，但是有一些需要改动的内容，下面做一下记录。
1.定义对象时，需要指定每个属性值
例如：listQuery:{} 如果使用：listQuery.Filter 会报错提示，listQuery对象上没有Filter参数。因此定义listQuery:{Filter:null};
2.监听input组件的回车事件
vue2的写法：@keyup.enter.native，
vue3的写法：@keyup.enter
报错信息：
[vue/no-deprecated-v-on-native-modifier] '.native' modifier on 'v-on' directive is deprecated.
3.input组件中的图标
vue2的写法：<a-icon slot="prefix" type="search" />
vue3的写法：
<template #prefix>
<search-outlined />
</template>
4.button组件中的图标
vue2的版本：
<a-button type="primary" icon="search" @click="handleFilter">查询</a-button>
vue3的版本：
<a-button type="primary" @click="handleFilter">
<template #icon>
<search-outlined />
</template>
查询</a-button>
5.alert组件的使用
<a-alert type="warning" style="margin-top: 5px" showIcon>
<template #message>
<div style="display: flex; justify-content: space-between; align-items: center">
<span
>已选择<b style="margin:0 5px;">{{ checkedIds.length }}</b
>项</span
>
<span @click="checkedIds = []" style="cursor: pointer;">清空</span>
</div>
</template>
</a-alert>
6.插槽的使用
使用插槽需要用`template`标签，然后内容为`#插槽名称`的方式来处理
例如上面的：
<template #prefix>
<search-outlined />
</template>
<template #icon>
<search-outlined />
</template>
7.table组件的部分使用——后续更新
7.1 columns列数据的渲染
<template #bodyCell="{ column, record }">
<div v-if="column.dataIndex == 'action'">
//需要通过 #bodyCell的方式来处理，然后通过v-if="column.dataIndex==xx"的方式来渲染不同的列
</div>
</template>
7.2 a-dropdown组件的使用
<a-dropdown>
<a class="ant-dropdown-link" href="javascript:;">
操作
<a-icon type="down" />
</a>
<template #overlay>
<a-menu>
<a-menu-item>
<a-popconfirm title="确定要删除吗？" @confirm="handleDelRole(record.id)">
<a href="javascript:;">删除</a>
</a-popconfirm>
</a-menu-item>
<a-menu-item>
<a href="javascript:;" @click="handleAdd(record)">添加</a>
</a-menu-item>
</a-menu>
</template>
</a-dropdown>
7.3 如果在7.2中的代码中添加事件时，不能直接使用$refs.xxx.open(record)的方式来处理
例如上面中的@click="handleAdd(record)"，不能使用@click="$refs.xxx.open(record)"，会报错提示xxx为undefined,且无open的方法function
7.4 表格的选择row-selection
vue3的表格选择：
<a-table
style="margin-top: 5px"
rowKey="id"
:columns="memberColumns"
:dataSource="data"
@change="handleTableChange"
:pagination="pagination"
:customRow="onCustomRow"
:row-selection="{ selectedRowKeys: checkedIds, onChange: onSelectedRowChange }"
>
</a-table>
对应的script
onSelectedRowChange(selectedRowKeys) {
this.checkedIds = selectedRowKeys;
},
点击行方法vue2和vue3的区别：
vue2的写法：
onCustomRow(record) {
return {
on: {
click: (event) => {
}, // 点击行
},
};
},
vue3的写法：
onCustomRow(record) {
return {
onclick: () => {
///
},
};
},
8.form组件
8.1 form与form-model合并了，目前只有form
<a-form :model="form" :rules="rules" @finish="handleOk" :label-col="labelCol" :wrapper-col="wrapperCol">
<a-form-item label="名称" ref="displayName" name="displayName">
<a-input v-model:value="form.displayName" placeholder="请输入机构名称" />
</a-form-item>
<a-form-item style="text-align: right" :label-col="{ span: 0 }" :wrapper-col="{ span: 24 }">
<a-space>
<a-button type="primary" ghost @click="handleCancel">取消</a-button>
<a-button type="primary" html-type="submit">确定</a-button>
</a-space>
</a-form-item>
</a-form>
8.2 触发校验的只能是@finish方法，且需要html-type="submit"的按钮才能触发
8.3 prop改为name，否则无法触发rules
8.4 v-model统一改为v-model:value
8.5 finish方法
this.confirmLoading = true;
//调用自己的方法：
createUpdate(this.form)
.then(() => {
this.visible = false;
this.$message.success('操作成功');
this.$emit('ok');//子组件触发父组件的ok方法。
})
.finally(() => {
this.confirmLoading = false;
});
8.5 清空校验：
vue2的用法：使用clearValidate方法，但是vue3使用这个，则需要在setup中，而且我没有测试成功，因为我这边地方是弹窗，因此我通过设置a-modal中的destroyOnClose为false，也就是要强制销毁组件，则再次打开弹窗时，则不会有上一次的规则校验了。
9.modal组件的使用
我想要去掉a-modal的footer部分：
百度了很久，才发现一个可用的办法：
在此处附上大神的链接：vue3.0修改antdesginVue中对话框组件（＜a-modal＞）的头部样式http://t.csdn.cn/65e7L
步骤如下：
9.1 在外层套一个div，添加一个class属性，一个ref属性
9.2 在a-modal中添加 :getContainer="() => $refs.ruleFormRef"
9.3 去掉底部的样式，则先去掉按钮
<template #footer>
<span></span>
</template>
9.4 css样式部分：
<style scoped>
.tenantFormModalCls :deep.ant-modal-footer {
padding: 0 !important;
}
</style>
9.5 完整代码如下：
<div ref="ruleFormRef" class="tenantFormModalCls">
<a-modal
:title="form.id ? '编辑' : '添加根机构'"
:width="640"
:visible="visible"
:confirmLoading="confirmLoading"
@cancel="handleCancel"
:destroyOnClose="true"
:getContainer="() => $refs.ruleFormRef"
>
<a-spin :spinning="confirmLoading">
<a-form :model="form" :rules="rules" @finish="handleOk" :label-col="labelCol" :wrapper-col="wrapperCol">
<a-form-item label="名称" ref="displayName" name="displayName">
<a-input v-model:value="form.displayName" placeholder="请输入机构名称" />
</a-form-item>
<a-form-item style="text-align: right" :label-col="{ span: 0 }" :wrapper-col="{ span: 24 }">
<a-space>
<a-button type="primary" ghost @click="handleCancel">取消</a-button>
<a-button type="primary" html-type="submit">确定</a-button>
</a-space>
</a-form-item>
</a-form>
</a-spin>
<template #footer>
<span></span>
</template>
</a-modal>
</div>
先这些吧，后续会持续更新！！！
多多积累，多多收获！！！
