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

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

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

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

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

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

2.1通过react实现

2.2通过bus总线实现

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

3.已经实现的内容

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

<template>
  <div class="tab">
    <el-table
      :row-class-name="tableRowClassName"
      :data="tableData"
      @row-click="change"
      :default-sort="{ prop: 'date', order: 'descending' }"
    >
      <el-table-column prop="name" label="角色名字" sortable width="100">
      </el-table-column>
      <el-table-column prop="A" label="10-14周岁" sortable width="110">
      </el-table-column>
      <el-table-column prop="B" label="14-18周岁" sortable width="110">
      </el-table-column>
      <el-table-column prop="C" label="18-25周岁" sortable width="110">
      </el-table-column>
      <el-table-column prop="D" label="25-35周岁" sortable width="110">
      </el-table-column>
      <el-table-column prop="E" label="35+周岁" sortable width="110">
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
    };
  },
  mounted() {
    this.getdata();
  },
  methods: {
    getdata() {
      this.$axios.get("./json/shuju.json").then((tableData) => {
        this.tableData = tableData.data.mapdata;
        // console.log(tableData.data.mapdata);
        // console.log(1)
      });
    },
    formatter(row, column) {
      return row.specialty;
    },
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex === 1) {
        return "warning-row";
      } else if (rowIndex === 3) {
        return "success-row";
      }
      return "";
    },
    change(val) {
      let thisRowData = this;
      thisRowData = val;
      console.log(thisRowData);
      this.$emit("table", thisRowData);
    },
  },
  computed: {
  },
};
</script>

<style lang="scss">
.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}
</style>

目前想法是：获取到数据后，将数据传入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.玫瑰图从全局接受数据

<template>
  <div class="meiguitu">
    <!-- @click="change"> -->
    <div id="meigui" ref="meigui" style="width: 300px; height: 250px"></div>
  </div>
</template>

<script>
export default {
  name: "JMEIGUITU",
  data() {
    return {};
  },
  mounted() {
    this.dataEcharts();
  },
  computed: {
    rosedata() {
      return this.$store.state.clickeddata;
    },
  },
  watch: {
    rosedata() {
      this.dataEcharts();
    },
  },
  methods: {
    dataEcharts: function () {
      // console.log(this.rosedata);
      var myChart = this.$echarts.init(this.$refs.meigui);
      myChart.setOption({
        series: [
          {
            type: "pie",
            data: [
              {
                value: this.rosedata.A,
                name: "10-14",
              },
              {
                value: this.rosedata.B,
                name: "14-18",
              },
              {
                value: this.rosedata.C,
                name: "18-25",
              },
              {
                value: this.rosedata.D,
                name: "25-35",
              },
              {
                value: this.rosedata.E,
                name: "35+",
              },
            ],
            radius: ["20%", "60%"],
            roseType: "area",
          },
        ],
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.meiguitu {
  width: 100%;
  float: left;
}
</style>

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

即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) {.........}