工作中第一次使用Ant-Design-Vue UI 组件库配合Vue2项目，上手起来比较麻烦，网上相关的文章也比较少，大多数是Ant-Design-Vue配合Vue3的使用，有的写得不是特别详细，为了避免以后碰到同样的问题，特地做了如下总结，后续会持续更新
1.安装（以下均是针对Vue2项目的）
1.安装依赖包
npm i --save ant-design-vue@next 或者 yarn add --save ant-design-vue@next
2. 引入（分为全局引入和按需引入）
①main.js中全局引入
// 引入AntD
import Antd from 'ant-design-vue';
// 引入AntD的样式文件
import 'ant-design-vue/dist/antd.css';
// 将AntD注册为Vue的插件
Vue.use(Antd)
②main.js中局部引入
// 引入按钮组件和消息组件
import { Button, message } from 'ant-design-vue';
Vue.use(Button，message)
2.使用
1.DatePicker 日期选择框
项目中用到的日期选择框是类似于这样的一种
需求：
获取用户选择的开始时间和结束时间，向后端请求数据
代码：
<template>
<div>
<!-- 日期选择器 -->
<!-- 使用 format 属性，可以自定义日期显示格式 ； getCalendarContainer：定义浮层的容器，默认为 body 上新建 div，可以是一个函数-->
<a-range-picker format="YYYY-MM-DD" @change="payTimeChange" :getCalendarContainer="(trigger) => trigger.parentNode">
</div>
</template>
<script>
export default {
data() {
return {
form:{
startPayTime:'',
endCreateTime:''
}
}
},
methods: {
payTimeChange(date, dateString){
console.log("客户选择的时间", date, dateString); //第二个参数获取到的是用户选择的开始时间和结束时间组成的数组
this.form.startPayTime = dateString[0];
this.form.endPayTime = dateString[1];
}
},
}
</script>
2. Cascader 级联选择
需求：
根据省份加载对应的城市，再根据城市加载对应的区（）
代码：
<template>
<div>
<!-- 省市区三级联动 -->
<!-- options：可选项数据源 loadData：用于动态加载选项 change：选择完成后的回调-->
<a-cascader
:options="projectAreaOptions"
placeholder="请选择省/市/区"
:load-data="loadData"
change-on-select
@change="onChange"
>
<a-icon slot="suffixIcon" type="caret-down" />
</a-cascader>
</div>
</template>
<script>
export default {
data() {
return {
projectAreaOptions: [], // 收集可选项数据源
shippingAddress: "",
}
},
created() {
this.initCityData()
},
methods: {
// 省市区三级联动--获取省份
initCityData() {
util.apiPost(globalUrl.getAreaByName).then((res) => {
console.log("获取省份", res)
if (res.code === 200) {
this.projectAreaOptions = res.data.map((item) => {
return {
value: item.areaName,
label: item.areaName,
isLeaf: false,
}
})
}
})
},
// 加载省份后面对应的市和区
loadData(selectedOptions) {
const targetOption = selectedOptions[selectedOptions.length - 1]
targetOption.loading = true
// 如果后端返回的是四级数据，前台页面只需要展示三级数据，需要进行条件判断：选择的数据长度等于3时， 不再加载后面的数据
if (selectedOptions.length === 3) {
targetOption.loading = false
return
}
if (this.projectAreaOptions.length) {
const targetOption = selectedOptions[selectedOptions.length - 1]
targetOption.loading = true
// 发送请求获取市和区数据
util
.apiPost(globalUrl.getAreaByName, { proName: targetOption.value })
.then((res) => {
if (res.data.length) {
for (let i = 0; i < res.data.length; i++) {
const element = res.data[i]
if (element.children) {
delete element.children
}
;(element.value = element.areaName),
(element.isLeaf = false),
(element.label = element.areaName)
}
targetOption.loading = false
targetOption.children = [...res.data]
this.projectAreaOptions = JSON.parse(
JSON.stringify(this.projectAreaOptions)
)
}
})
} else {
targetOption.loading = false
targetOption.isLeaf = true
}
},
// 选择完成后的回调，一般用来收集用户选择的省市区数据
onChange(val) {
console.log("用户选择的省市区", val) // 返回的val是一个数组，类似于['湖北省','武汉市','洪山区']
this.shippingAddress = val.join("") // 将省市区数据拼接成字符串
},
},
}
</script>
<style lang="less" scoped></style>
3.Tabs 标签页
需求：
切换不同的tab栏，渲染不同的表格数据(第一个tab的数据不同，后面几个tab的数据类似)
代码：
① 父组件中
<template>
<div class="box">
<div class="tabs">
<a-tabs v-model="currentActive" @change="tabClick" :animated="false">
<a-tab-pane :tab="item.name" v-for="item in tabsList" :key="item.key">
</a-tab-pane>
</a-tabs>
</div>
<NoApplyTable v-if="currentActive === 1"></NoApplyTable>
<BillTable v-else :currentActive="currentActive"></BillTable>
</div>
</template>
<script>
import NoApplyTable from "./components/noApplyTable.vue"
import BillTable from "./components/billTable.vue"
export default {
name: "billManage",
components: { NoApplyTable, BillTable },
data() {
return {
key: 1,
currentActive: 1,
tabsList: [
{
name: "未申请",
key: 1,
},
{
name: "待审核",
key: 10,
},
{
name: "待开票",
key: 20,
},
{
name: "已开票",
key: 30,
},
{
name: "已失效",
key: 40,
},
],
}
},
methods: {
//切换tab栏
tabClick(val) {
this.currentActive = val
},
},
}
</script>
②NoApplyTable组件中
<template>
<div class="in-box">
<!-- 渲染表格数据 -->
<vxe-grid
ref="vxeGrid"
resizable
:columns="myColumns"
:data="dataTable"
:loading="showLoading"
@select-all="selectChangeEvent"
@select-change="selectChangeEvent"
:checkbox-config="{
checkRowKeys: selectCheckedKeysArr,
highlight: true,
}"
row-id="keyIndex"
>
</vxe-grid>
<vxe-pager
:current-page="tablePage.currentPage"
:page-size="tablePage.pageSize"
:total="tablePage.total"
@page-change="handlePageChange"
>
</vxe-pager>
</div>
</template>
<script>
export default {
props: [],
data() {
return {
// ...省略其他
dataTable: [],
tablePage: {
currentPage: 1,
pageSize: 10,
total: 0,
},
}
},
methods:{
}
}
</script>
②billTable组件中
<template>
<div class="in-box">
<!-- 渲染表格数据 -->
<vxe-grid
ref="vxeGrid"
resizable
:columns="myColumns"
:data="dataTable"
:loading="showLoading"
@select-all="selectChangeEvent"
@select-change="selectChangeEvent"
:checkbox-config="{
checkRowKeys: selectCheckedKeysArr,
highlight: true,
}"
row-id="keyIndex"
>
</vxe-grid>
<vxe-pager
:current-page="tablePage.currentPage"
:page-size="tablePage.pageSize"
:total="tablePage.total"
@page-change="handlePageChange"
>
</vxe-pager>
</div>
</template>
<script>
export default {
props: ["currentActive"],
data() {
return {
// ...省略其他
dataTable: [],
tablePage: {
currentPage: 1,
pageSize: 10,
total: 0,
},
}
},
watch: {
// 监听currentActive值的变化，当变化时需要清空表格数据，将当前页数重置为0， 总条数重置为0，然后发请求加载列表数据
currentActive: {
handler: function(oldValue, newValue) {
this.showLoading = true
this.dataTable = []
this.tablePage.currentPage = 1
this.tablePage.total = 0
this.initBillList()
},
immediate: true,
},
},
methods: {
// 获取表格列表数据
initBillList() {
// ...省略其他
},
},
}
</script>
<style lang="less" scoped></style>
