关于element-ui多表联动的一些想法和实现

目的————即界面内有表格和多个图表，反应多条数据

点击表格某一行或者地图某一块，其他几个图表显示单块数据

二次点击后，取消显示单块数据，回复多条数据状态

1.根据同学的描述，他的思路是通过axios将数据传入vuex，然后通过切换组件来实现多表联动

2.网上查阅到的一些还未深究实践的方法

 2.1通过react实现

 2.2通过bus总线实现

 2.3通过兄弟组件传值，即兄传父，父传弟

3.已经实现的内容

通过添加一个row-click，获取到点击行的数据。

目前想法是：获取到数据后，将数据传入vuex中，成为全局数据，进行调用。点击不同数据后，将值进行重新赋值。

接上述，获取到数据后，尝试将这组数据通过兄弟组件传值，奈何本人技术不够，后来想了想兄弟传值似乎也有些繁琐，不如直接传到vuex全局，其他图表调用全局数据，点击后数据更新，随之重新构建图表。

实现过程：

1.给表格添加一个change函数，把获取到的一组数据传到vuex全局state内。

”changedata“是和vuex中接受的state对应，第二个参数是要从表格传到全局的数据。

change(val) {
      let thisRowData = this;
      thisRowData = val;
      // console.log(thisRowData);
      // this.$emit("table", thisRowData);
      this.$store.commit("changedata",thisRowData);
    },

store内index.js文件，即vuex如下：

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    clickeddata:
      {name: "周棋洛",value:10 , A: "130" ,B: 130,C:543,D: 130,E:10 },
 
    
  },
  getters: {},
  mutations: {
    changedata(state,x){
      state.clickeddata=x
      // console.log(state.clickeddata)
    }
  },
  actions: {},
  modules: {},
});

其中，changedata对应接受组件传到全局的数据，将state内clickdata初始值赋值为传进来的数值。

2.玫瑰图从全局接受数据

最主要处是获取数据和监听刷新

即computed和watch

其他类似，都是一个道理。

其实想通了就觉得很简单，但是一开始就是怎么也想不明白，有了想法也是实现起来老报错。

遇到的问题有很多，最头痛的是图表获取到全局数据后无法更新到页面，因为已经构建好了图表。这里尝试过使用设定key值；监听值是否一致，不一致则重新构建图表等方式，最后我也忘记了咋解决的，哈哈，也是监听watch，然后重新构建图表。

这里还遇到一个问题，就是EchartsMap获取本地json时先构建地图后获取数据的问题，我这里想到之前同学帮我解决我上一版本的玫瑰图问题的解决方法，不得不感叹真的是有人就是很聪明。

data() {
    return {
      Data: [],
    };
  },
  mounted() {
    this.getdata();
  },
  components: {},
  methods: {
    getdata() {
      this.$axios.get("./json/Data.json").then((tableData) => {
        this.Data = tableData.data.Data;
        /* console.log(this.Data);*/
        this.initMap(this.Data);
      });
    },
    initMap: function (data) {.........}

即，将原本获取数据、构建地图的挂载，修改为一个获取数据的挂载，将地图的构建放到获取数据函数里面。

目前想的不太明白，同学的方法是通过二次点击同一块实现切换组件，单次点击实现数据的传输更改（对点击内容进行判断，点击前后内容一致则切换组件，不一致则数据更改）

我的不太一样，我的是设置数据的传输，已经设定了数据是数组形式，若要多条数组应该是要对象类型~还不太明白喔~

还有待完善……