vue引用element-ui、echart、axios制作简单的表格、饼图页面

效果展示

 表格组件中可以增删改、搜索数据，饼图为echart组件，两个组件的数据都是通过axios获取。

vue文件结构

Mylist组件中包含表格信息以及饼图、Myheader组件中包含添加信息功能。主要文件分别为App.vue  ,Myheader.vue   ,Mylist.vue   ,xzf.json   ,main.js.

App.vue

在app中使用axios获取infos表格信息，注册Myheader、Mylist两个组件。定义一个空数组infos，在method中函数getInfos（），使用axios获取xzf.json中的infos信息并赋值给infos，在mouted中调用getInfos（）。通过props传递给子组件Mylist。

<template>
  <div>
    <MyHeader/>
    <MyList :infos="infos" />  //将infos传给子组件
  </div>
</template>
<script>
import MyList from "./components/MyList";
import MyHeader from "./components/MyHeader";
import axios from 'axios';          //引入axios
export default {
  name: "App",
  components: { MyList, MyHeader },
  data() {
    return {
		infos:[]   
    };
  },
  methods: {
       //删除一条信息的方法，会在全局事件总线上绑定
	  deleteInfo(id){
		this.infos = this.infos.filter( infos => infos.id !== id )
	  },
      //添加一条信息的方法，会在全局事件总线上绑定
	  addInfo(infoObj){
		  this.infos.unshift(infoObj)
	  },
    //获取xzf.json中的数据并赋值。
    getInfos(){               
      axios.get('http://localhost:8080//static/xzf.json').then(response => {
                    this.infos=response.data.infos
                }, response => {
                    console.log("error");
                });
    }
  },

  mounted() {
    this.$bus.$on("deleteInfo", this.deleteInfo);   //绑定全局事件
    this.$bus.$on("addInfo", this.addInfo);    //绑定全局事件
    this.getInfos()   
  },
  beforeDestroy() {
    this.$bus.$off("deleteInfo");      //销毁全局事件
    this.$bus.$off("addInfo");        //销毁全局事件
  },
};
</script>
<style>
</style>

 Mylist.vue

该组件中使用了element-ui中的table组件、echarts中的饼图。

表格中的删除按钮调用了app绑定在全局事件总线上的方法。

修改功能好像是element-ui自带的方法，不清楚，，反正可以成功修改数据。

通过props接受app传来的infos，赋值给tabledata作为默认值。使表格展示infos中的所有信息。在method中设置了searchdata搜索函数，点击搜索按钮后，触发searchdata事件。