【伸手党福利】【第四弹】jeecg-boot前端之ant design vue开发总结【不断更新中】
ant design vue的官方开发文档属于一个给一定前端编程基础的人看的。
对于一个直接上手jeecgboot的人来说，这个前端文档仍旧不够小白。
所以在学习过程中，在此进行一下笔记。
给大家带来伸手党的快感
首先，介绍官方文档：https://www.antdv.com
里面好多功能都在其中，只是没有一定前端开发基础，看起来会很费力。
作为小白，新建页面请移步
属性和事件
属性的调用为标签内：
事件的调用为标签内@
如：
<a-button type="primary" icon="poweroff" :loading="iconLoading" @click="enterIconLoading">
延迟1s
a-button>
默认loading属性是iconLoading这个变量，当click事件发生时，调用了enterIconLoading函数，即延时1秒将loading设置为true。
<script>
export default {
data() {
return {
//loading属性默认为false
iconLoading: false,
};
},
methods: {
enterIconLoading() {
this.iconLoading = {
delay: 1000 };
},
},
};
script>
表格
基础格式：
<template>
<a-card>
<a-table :columns="columns" :data-source="data">
a-table>
a-card>
template>
<script>
const columns = [
{
title: '指标',
dataIndex: 'name',
},
{
title: '今日',
dataIndex: 'today',
},
{
title: '昨日',
dataIndex: 'yesterday',
},
{
title: '单位',
dataIndex: 'unit',
},
];
const data = [
{
key: '1',
name: 'John Brown',
today: '￥300,000.00',
yesterday: 'New York No. 1 Lake Park',
//这里没有unit值，则可以不填
},
{
key: '2',
name: 'Jim Green',
today: '￥1,256,000.00',
yesterday: 'London No. 1 Lake Park',
//这里没有unit值，则可以不填
},
{
key: '3',
name: 'Joe Black',
today: '￥120,000.00',
yesterday: 'Sidney No. 1 Lake Park',
unit:'222',
},
];
export default {
name: "index",
data() {
return {
data,
columns,
}
}
}
</script>
<style scoped>
</style>
如果将以上代码按顺序全部复制到一个vue页面，则会出现如下图所示内容：
然后我们可以对其属性进行修改。
官方链接：
https://www.antdv.com/components/table-cn/#Table
属性：
在标签内部使用，也可在template当中使用。【使用时候加 ： 】
如：bordered属性
<a-table :bordered="true" :columns="columns" :data-source="data">
然后重点注意这两个属性
这意味着slot属性可以单独配置，由于在标签内配置不能加入html代码，所以单独配置就有了这个优势。
<template slot="title" slot-scope="currentPageData">
Header
template>
实战中：
<template slot="name" slot-scope="text1">
<trend flag="up">
<span style="color:red">
<a-tooltip placement="top">
<template slot="title">
<trend flag="up"><div style="color: #FFF;">11div>trend>
template>
22.27
a-tooltip>
span>
trend>
template>
显示效果
然后让我们逐个解读：
1、将某列scopedSlots命名并进行操作（如增加a链接）
首先，在数据列增加scopedSlots属性
方法1：
<a slot="name" slot-scope="text">{
{ text }}a>
方法2
<template slot="name" slot-scope="text1">
<a>{
{ text1 }}a>
template>
2、将某列Slots的title修改（如增加图标）
首先，将数据中title注释掉，使用slot配置title属性
然后在template的a-table里面，配置title内容
<span slot="指标"><a-icon type="smile-o" /> 指标span>
3、判断内容并增加样式（如tags增加颜色框）
<span slot="tags" slot-scope="tags">
<a-tag
v-for="tag in tags"
:key="tag"
:color="tag === 'loser' ? 'volcano' : tag.length > 5 ? 'geekblue' : 'green'"
>
{
{ tag.toUpperCase() }}
a-tag>
span>
前后端基本传参
前端：
以下内容为传参基本格式（demo复制即可调用，url值请自行修改）
<template>
<div class="page-header-index-wide">
<a-card :bordered="1" style="height:100%;margin: 10px 0 0 0; ">
111{
{
tableres }}{
{
a }}222
</a-card>
</div>
</template>
<script>
import {
getAction} from "@/api/manage";
export default {
name: "index",
components: {
},
data() {
return {
//声明变量，不声明变量不会报错，但是会不在html当中显示。
a: "",
tableres:'',
//getAction后台取值地址
url:"/submit/submit",
}
},
methods:{
loadData(){
getAction(this.url).then((res)=>{
this.a = res.result;
this.tableres = '555';
})
}
},
created() {
this.loadData();
}
}
</script>
运行结果：
后端
后端新开页面记得配shiro
package org.jeecg.modules.test;
import lombok.extern.slf4j.Slf4j;
import org.jeecg.common.api.vo.Result;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
@RestController
@RequestMapping("/submit")
@Slf4j
public class JeecgSubmitController {
@GetMapping(value = "/submit")
public Result<String> submit() {
Result<String> result = new Result<String>();
result.setResult("Hello!!");
result.setSuccess(true);
log.info("===============================succeed=========================");
return result;
}
}