vue组件可视化 开源,vue关系图可视化插件
本文主要介绍使用vue比较两组数据差异的可视化组件的相关信息。通过示例代码详细介绍，对大家学习或使用vue有一定的参考价值。有需要的朋友可以参考一下。
目录
要求：一般要点：根据刚才的要点，可以搭建组件的道具。组件的基本样式也非常简单。完成后，最后贴完整代码：使用示例：效果预览：扩展函数TODO: summary作为标题。我朋友有这样的要求，感觉挺普遍的。发出来供大家参考。
需求：
El-table用于显示两组数据，有差异的单元格显示为红色，新增的单元格显示为绿色。
大概要点：
需要一个数据集，包含两组要比较的数据。
需要一个唯一键来确定某一行的数据是否存在于其他数据中(无论它是否是新的)
接受一个表列的配置来渲染表，只根据配置的数据比较差异，其他数据不用比较。
根据刚才的要点可以建立一下组件的props：
道具：{
唯一键：{
类型：字符串，
默认值：“id”
},
数据组：{
类型：数组，
验证器：val=val.length===2
},
列：{
类型：数组，
必填：真
}
}
唯一id默认为id；列的格式定义为{label，prop，}根据el-table-column。
组件的基本样式也很简单：
模板
div class=差异表容器
el表
v-for=(data，i) in completedData
:key=i
:data=data
:row-style=markRowStyles
:cell-style=markCellStyles
El-table-column v-for= item in columns :key= ` $ { I } $ { item . prop } ` align= center v-bind= item /
/el-table
/div
/模板
style lang=scss 范围。差异表容器{
显示器：flex
align-items:flex-start；el表。el表{
左边距：20px
}
}
/风格
如上图，两个表只是简单的水平排列。这里的CompletedData是指diff处理后的数据，格式与传入的dataGroup相同。MarkRowStyles和markRowStyles由el-table提供。它们指的是行和列的样式，值是对象或返回对象的函数。
接下来，定义两个符号，然后在diff data时标记数据。用符号标记可以防止属性名冲突。
data() {
返回{
diff _ cell _ key:symbol( diff cells )，//存储不同单元格属性名称的数组。
completed _ key:symbol( completed )//标记已被处理。
};
}
那么diff的风格处理也可以直接确定。
方法：{
//如果处理后没有标记，只出现在一组数据中，即增加了新的数据。
markRowStyles({ row }) {
返回(
！划【这个。COMPLETED_KEY] {
background color:“# e1f3d 8”
}
);
},
//根据当前行的唯一键，在地图中查找缓存的行数据。
//是DataGroup [0]。find(item=item[唯一键]==row[唯一键])
//然后判断DIFF_CELL_KEY数组是否包含当前列的属性名。
markCellStyles({ row，column }) {
const { $_cacheMap，uniqueKey，DIFF _ CELL _ KEY }=this
const _ cache row=$ _ cache map . get(row[unique key])；
返回(
_cacheRow
_cacheRow[DIFF_CELL_KEY]。包括(column.property) {
background color:“# fde2e 2”
}
);
}
}
最后是对diff的处理，直接用calculation属性完成。处理完成后，将返回新数据：
计算值：{
//处理后的数据
completedData({ dataGroup，uniqueKey，columns，DIFF_CELL_KEY，COMPLETED_KEY }) {
//这一步不是必须的。根据业务要求，如果按照规定不能修改原始数据，请进行深度复制。
const _ data group=deep clone(data group)；
//Mapstringnumber，object，ts不熟悉。应该是这样写的，其实是row[unique]: row
const cache Map=new Map()；
//遍历第一组数据一次，初始化DIFF_CELL_KEY数组，然后存储在map中。
for (const _row of _dataGroup[0]) {
_ row[DIFF _ CELL _ KEY]=[]；
cacheMap.set(_row[uniqueKey]，_ row)；
}
//遍历第二组数据，里面还有一次循环，因为只处理列里面定义的属性，其他属性不做对比
for (const _row of _dataGroup[1]) {
for (const { prop } of columns) {
//如果是唯一键就直接跳过
if (prop===uniqueKey)继续；
//从缓存中查找相同的一条数据
const original=缓存映射。get(_ row[唯一键])；
//如果找不到就说明这条数据是新增的，直接跳过
如果(!原文)继续；
//否则就在两组数据中打一个标识表示已处理过，不是新增的
_ row[COMPLETED _ KEY]=true；
original[COMPLETED _ KEY]=true；
//最后对比两个属性值，如果相同就推进差异单元格关键字数组中
//注意这里差异单元格关键字数组只存在于第一组数据当中
//因为只要有差异就会在所有表格中显示，所以不用每一组数据都存
_ row[道具]!==original[prop]original[DIFF _ CELL _ KEY].推（道具);
}
}
//将地图存一份到这中，因为会在处理样式的时候用到
这个. cacheMap=cacheMap
return _ dataGroup
}
}
完事了，最后贴一下完整代码：
模板
div class=差异表容器
埃尔表
v-for=(data，i) in completedData
:key=i
:data=data
:row-style=markRowStyles
:cell-style=markCellStyles
El-table-column v-for= item in columns :key= ` $ { I } $ { item。prop } ` v-bind= item align= center /
/el-table
/div
/模板
脚本
函数深度克隆(瓦尔){
//看需求要不要做深拷贝
返回英国压力单位
}
导出默认值{
名称： DiffTable ，
道具：{
唯一键：{
类型：字符串，
默认值：" id "
},
数据组：{
类型：数组，
验证器：val=val.length===2
},
列：{
类型：数组，
必填：真
}
},
data() {
返回{
DIFF _ CELL _ KEY:Symbol( DIFF cells )，
COMPLETED_KEY:符号(“已完成”)
};
},
计算值：{
completedData({ dataGroup，uniqueKey，columns，DIFF_CELL_KEY，COMPLETED_KEY }) {
const _ data group=深度克隆(数据组)；
const cache Map=new Map()；
for (const _row of _dataGroup[0]) {
_ row[DIFF _ CELL _ KEY]=[]；
cacheMap.set(_row[uniqueKey]，_ row)；
}
for (const _row of _dataGroup[1]) {
for (const { prop } of columns) {
if (prop===uniqueKey)继续；
const original=缓存映射。get(_ row[唯一键])；
如果(!原文)继续；
_ row[COMPLETED _ KEY]=true；
original[COMPLETED _ KEY]=true；
_ row[道具]!==original[prop]original[DIFF _ CELL _ KEY].推（道具);
}
}
这个. cacheMap=cacheMap
return _ dataGroup
}
},
方法：{
markRowStyles({ row }) {
返回（
！划【这个. COMPLETED_KEY] {
背景颜色：" # e1f3d 8 "
}
);
},
markCellStyles({ row，column }) {
const { $_cacheMap，uniqueKey，DIFF _ CELL _ KEY }=this
const _ cache row=$ _ cache map。get(行[唯一键])；
返回（
_cacheRow
_cacheRow[DIFF_CELL_KEY].包括(column.property) {
背景颜色：" # fde2e 2 "
}
);
}
}
};
/脚本
样式lang=scss 范围。差异表容器{
显示器：flex
align-items:flex-start；埃尔表100 . El表{
左边距：20px
}
}
/风格
使用示例：
模板
diff-table:data-group=[旧数据，新数据]:columns=表列/
/模板
脚本
从导入不同的./diff表。vue ；
导出默认值{
名称："索引",
组件：{
差异表
},
data() {
返回{
旧数据：[
{ id: 1，姓名：张三1 ,年龄：23,地址： zxczxczxc }，
{ id: 2，姓名：张三2 ,年龄：23.5,地址： zxczxczxc }，
{ id: 3，姓名：张三34 ,年龄：23,地址： zxczxczxc }，
{ id: 4，姓名：张三4 ，年龄：23，地址： zxczxczxc }，
{ id: 5，姓名：张三5 ，年龄：23，地址： zxczxczxc }，
{ id: 6，姓名：张三5 ，年龄：23，地址： zxczxczxc }
],
新数据：[
{ id: 1，姓名：张三1 ，年龄：23，地址： zxczxczxc }，
{ id: 2，姓名：张三2 ，年龄：23，地址： zxczxczxc }，
{ID: 4，姓名：张三4 ，年龄：23，地址：地址地址地址 }，
{ id: 3，姓名：张三3 ，年龄：23，地址： zxczxczxc }，
{ id: 5，姓名：张三5 ，年龄：23，地址： zxczxczxc }，
{ id: 7，姓名：张三5 ，年龄：23，地址： zxczxczxc }，
{ id: 8，姓名：张三5 ，年龄：23，地址： zxczxczxc }
],
表格列：[
{label:唯一id ，prop: id}，
{label: name ，prop: name}，
{label: age ，prop: age}，
{标签:地址，属性：地址 }
]
};
}
};
/脚本
效果预览：
扩展功能TODO：
可以配置n组数据进行比较。
超过两组数据后，应添加DELETE_ROW_KEY来标记删除的数据。
逻辑大致是这样的：仅存在于一组数据中的东西是新的；如果有多组数据，但不是全部，未包括的数据将被标记为已删除。
您可以配置差异样式、自定义差异规则等。
总结
就是这样。本文介绍了用vue比较两组数据差异的可视化组件。关于使用vue比较两组数据差异的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。