目前碰到一个非常棘手的问题,当前项目采用的是vue+elemenuUI,有这样一个业务场景:
页面中有三个视图:
1,一个tree组件(采用的elementui的tree)

[{
    Id,
    Name,
    status,
    Type
    Children:
        [{
            Id,
            Name,
            GIS,   // 地图坐标 [lng,lat]
            status,  // 三种状态(未选,半选,全选)
            Type,
        }]
}]

2,一个百度地图

[{
    Id,
    Name,
    GIS,   // 地图坐标 [lng,lat]
    status,  // 三种状态(未选,半选,全选)
    Type
}]

3,一个可以分类的列表(采用的elementui的tabs跟table组件)

[{
    Id,
    Name,
    status,   // 两种状态
    Type
}]

数据源一次性从后台拉过来之后.三个视图的数据全部同步显示.默认都是未勾选状态.
要实现的功能就是三种视图的状态同步。

他们都有选中,未选中状态,(地图还有半选中状态),为什么会有半选中状态..因为我们的业务场景是这样:
一个设备下绑定了很多个设备
拉回来的数据可能是这样的:

    [
        {
          id: 1,
          name: "分类一",
          children: [
            {
              id: 4,
              name: "综合设备",
              status: // 未选,全选,半选  
              children: [
                {
                  id: 11,
                  name: "子设备1",
                  status: false,
                  type: "class1"
                },
                {
                  id: 21,
                  name: "子设备2",
                  status: false,
                  type: "class2"
                },
                {
                  id: 31,
                  name: "子设备3",
                  status: false,
                  type: "class3"
                }
              ]
           },
           {
          id: 2,
          name: "分类二",
          children: [
            {
              id: 3,
              name: "综合设备二",
              status: // 未选,全选,半选
              children: [
                {
                  id: 12,
                  name: "子设备4",
                  status: false,
                  type: "class1"
                },
                {
                  id: 22,
                  name: "子设备5",
                  status: false,
                  type: "class2"
                },
                {
                  id: 32,
                  name: "子设备6",
                  status: false,
                  type: "class3"
                }
              ]
           }
        ]

也就是说tree组件的某个节点(包括父节点)选中之后。。地图跟分类列表都要状态同步。。反之其它也一样。。table还有全选功能

table这儿的分类标签实现方式：
因为数据分类不确定。只能动态循环加载。每个table绑定的数据源是经过过滤的源数据
tab标签的分类是后台返回的，数据结构大概是这样:

tabList: [
        {
          label: "设备分类一",
          type: "class1"
        },
        {
          label: "设备分类二",
          type: "class2"
        },
        {
          label: "设备分类二",
          type: "class2"
        }
      ]

<el-tabs type="border-card">
            <el-tab-pane v-for="(item,index) in tabList" :key="item.label">
              <span slot="label"><i class="el-icon-date"></i> {{item.label}}</span>
              <el-table 
                :data="sortByType(originalData,item.type)" 
                height="350" 
                v-loading.body="listLoading"
                element-loading-text="拼命加载中"
                @select="handleSelect"
                @select-all="handleSelectAll(sortByType(originalData,item.type))"
                :ref="item.type"
                fit highlight-current-row>
                <el-table-column type="selection"></el-table-column>
                <el-table-column :key="item.dataIndex" v-for="(item,index) in columns" :label="item.text">
                  <template slot-scope="scope">
                    {{scope.row[item.dataIndex]}}
                  </template>
                </el-table-column>
              </el-table>
            </el-tab-pane>
          </el-tabs>

// 源数据结构
originalData: [
        {
          id: 11,
          name: "设备一",
          checked: false,
          type: "class1"
        },
        {
          id: 12,
          name: "设备二"",
          checked: false,
          type: "class1"
        },
        {
          id: 13,
          name: "设备三",
          checked: false,
          type: "class1"
        },
        {
          id: 21,
          name: "LED一",
          checked: false,
          type: "class2"
        },
        {
          id: 22,
          name: "LED二",
          checked: false,
          type: "class2"
        },
        {
          id: 31,
          name: "视频一",
          checked: false,
          type: "class3"
        },
        {
          id: 32,
          name: "视频三",
          checked: false,
          type: "class3"
        }
      ]
      
// 分类显示数据
sortByType(data, type) {
  return data.filter(value => {
    return value.type === type;
  });
}

也就是通过type来显示分类数据,这儿的实现方式很难看。:data="sortByType(originalData,item.type)" 不知道还有没有其它办法.

我目前的想法是以tree的数据结构作为源数据绑定,地图数据跟分类的table列表绑定源数据通过computed计算之后的结果.(比如上面的originalData,因为这儿的数据结构不一样,不知道是否可行?)
地图就只拉取综合设备的所有节点,如果他的叶子节点没有全选中。就返回半选中状态。这儿也是一个难点.

但现在的难题在于因为tree组件是没办法直接更改他绑定的数据源的数据状态.包括table组件的checkbox也一样..我没办法将更改状态后的效果提现出来

不知道大家有没有碰到过类似的场景。。我该怎么解决目前的业务场景。。我的想法也很不成熟。。还望大家多多指教。。感谢!