目前碰到一个非常棘手的问题,当前项目采用的是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也一样..我没办法将更改状态后的效果提现出来
不知道大家有没有碰到过类似的场景。。我该怎么解决目前的业务场景。。我的想法也很不成熟。。还望大家多多指教。。感谢!