vue动态列表,vue动态数据
今天我们来给大家介绍下在某视频剪辑软件开发中我们经常会碰到的一种需求场景，本文主要介绍了某视频剪辑软件动态查询规则生成组件，需要的朋友们下面随着小编来一起学习学习吧
1. 动态查询规则
动态查询规则，大致如下图所示。是可以按照用户的自定义进行组织查询语句的一种复杂组件，大致可以实现结构化查询语言查询的在哪里条件，下面是摘自数据库的某一软件。
2.组件构建思路
按照规则组件的组织形式，可以把其视为一棵树，有树干和树叶，这样看起来就不难了。
2.1 组件属性数据：是树结构的内容，我们定义为：
{
条件：和，
规则：[],
}
字段列表：字段列表数组，可供选择的字段集合；
操作员列表：操作列表数组，可供选择的操作集合，定义如下：
{
标签: 包含，
价值：,
},
2.2 组件html
这里采用ElementUI构建，因此可以方便的组合各类用户界面控件来进行构建需要的界面。
当然该组件既然被看作树，因此其也是个递归组件，因此还涉及到自己调用自己。
模板
div class=规则-组-容器
div class=规则-组-标题
El-radio-group v-model= data。condition size= mini
埃尔-单选按钮标签=和/El-单选按钮
埃尔-单选按钮标签=或/El-单选按钮
/el-radio-group
差异
El-button size= mini @ click=添加规则(数据)添加规则/el-button
El-button size= mini @ click=添加组(数据)添加分组/el-button
El-button v-if= parent size= mini @ click= del group(data，parent)删除/el-button
/div
/div
div class=规则-组-正文
div class=规则列表
数据.规则中的模板v-for=(规则，索引
div :key=index v-if=！规则。条件 class= rule-container
！-字段-
重量-下拉列表
class=规则项目
v-model=规则。筛选字段
:data=getFieldList(rule . FilterTable)
@ change= handleFieldChange(rule)
/重量-下拉列表
！-操作符-
重量-下拉列表
class=规则项目
v-model=规则。操作员
:disabled=inputStatus规则 FilterField===社区Id
:data=getRule(rule .过滤表，规则。筛选字段)
/重量-下拉列表
！-值-
重量-多下拉列表
class=rule-item-long
v-if=rule.type===Dropdown
:disabled=inputStatus规则 FilterField===社区Id
v-model=规则。过滤值
:data=getData(rule .过滤表，规则。筛选字段)
/重量-多下拉列表
重量号
class=rule-item-long
:disabled=inputStatus规则 FilterField===社区Id
v-else-if=[DateTime ， Number ， Decimal].包含(rule.type)
v-model=规则。过滤值
/重量号
wt-text class= rule-item-long v-else v-model= rule .“过滤值”:禁用=“输入状态规则 FilterField===社区Id/wt-text
El-button size= mini @ click= del rule(index)删除/el-button
/div
创建规则
:key=index
五-否则
:data=rule
:parent=data
:fieldList=fieldList
:operatorList=operatorList
/CreateRule
/模板
/div
/div
/div
/模板
2.3 对不同数据类型的字段定义不同的条件
常量规则={
字符串：[
{
值："==",
标签: 等于，
},
{
值： ,
标签: 不等于，
},
{
价值：,
标签: 包含，
},
{
价值：,
标签: 不包含，
},
{
值："英寸",
标签: 其中之一，
},
{
值：你，
标签: 非其中之一，
},
{
值： mc ，
标签: 多包含，
},
],
编号：[
{
值："==",
标签: 等于，
},
{
值： ,
标签: 不等于，
},
{
值：,
标签: 大于等于，
},
{
值：,
标签: 小于等于，
},
],
词典：[
{
值："英寸",
标签: 其中之一，
},
{
值：你，
标签: 非其中之一，
},
],
日期：[
{
值： sdiff ，
标签: 几天前，
},
{
值： ediff ，
标签: 几天后，
},
],
}
2.4 定义方法操作组\规则
主要的操作涉及到添加\删除组和规则。
获取规则(表，字段){
让数据=(规则规则。string) []
让场=这个。getcurrentfield(表，字段)
如果(theField theField .控件类型){
if ([Dropdown]).包括（字段ControlType)) {
返回规则.字典
} else if ([DateTime].包括（字段ControlType)) {
退货规则。日期
} else if ([Number ， Decimal].包括（字段ControlType)) {
退货规则。编号
}否则{
返回规则.字符串
}
}
返回数据
},
//添加规则
添加规则(数据){
让规则={
类型："文本",
FilterTable: this.firstTable，
FilterField: this.firstField，
运算符："==",
过滤值： ,
}
数据。规则。推送（规则)
},
//删除规则
德尔规则(索引){
this.data.rules.splice(索引，1)
},
//添加分组
添加组(数据){
let group={
条件：或，
规则：[
{
类型："文本",
FilterTable: this.firstTable，
筛选字段："",
操作员： ,
过滤值： ,
},
],
}
数据.规则.推送(集团)
},
//删除分组
戴尔集团(数据，父项){
让index=parent。规则。查找索引((项目)=项目===数据
parent.rules.splice(index，1)
},
2.5 定义组件名
该组件命名为创建规则，定义代码很简单了。
导出默认值{
名称：创建规则，
道具：{
父级：{
类型：对象，
},
数据：{
类型：对象，
},
字段列表：{
类型：数组，
默认(){
return []
},
},
操作员列表：{
类型：数组，
默认(){
return []
},
},
},
}
3.使用组件
某视频剪辑软件中使用组件只需引用并增加到组件列表中即可。
从导入CreateRule。/CreateRule
导出默认值{
名称：新规则表单，
组件：{
创建规则，
},
}
在模板中添加引用
模板
div class=新规则格式
创建规则
v-if=！正在加载
:data=data
:fieldList=FilterTable
:operatorList=operatorList
/CreateRule
div v-if=！正在加载 class= description-wrap v-html= description /div
/div
/模板
4.效果展示
这就是拦截的实际效果。
在界面中，它可以作为搜索条件或过滤条件，并且非常灵活。
5.小结
在vue的开发和应用中，可以参考windows软件的一些界面，偶尔能给我们很大的启发。
关于Vue实现动态查询规则生成组件的这篇文章到此为止。有关Vue的动态查询规则生成组件的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。