【伸手党福利】【第四弹】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>

---

<a-table>表格

基础格式：

<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;">11</div></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;
        }





}

---