数据视图

描述

视图主要是用来控制页面中绘制的组件，以及组件的各个属性、方法、事件等，通过编辑视图，可以修改页面的呈现与交互。

由于使用页面设计器可以直接设计页面，配置组件，操作视图更简单，也更为方便直观。

因此不建议在此页面管理视图，最好只做查询功能。

如果想要直接修改视图的源代码，那么可以按照下面的说明来操作。

或者想了解页面配置的运行机制以及源码结构，也可以阅读该章内容进行参考。

操作

数据视图操作.png

1. 查看

可以查看视图的详细信息。

2. 编辑

可以编辑基础信息。

也可以对视图内容进行友好的可视化代码编辑。

数据视图代码.png

3. 复制

可以对该视图进行复制，以达到快速新建并复用的目的。

4. 删除

删除该视图，并有删除前的信息确认。

5. 寄连

可以查看绑定的寄连，数据视图在绑定了执行寄连之后，页面加载的时候，如果该寄连是在 before 阶段执行的，那么在寄连执行的时候可以直接获取到当前视图内容对象。

5. 页面

可以查看所有使用该视图的页面，方便修改视图的的时候知道会受到影响的页面。

查询

数据视图查询.png

可以通过视图编码、用途描述、数据内容以及ID进行查询，支持模糊查询。

点击空格即可唤出查询窗口，输入条件后按回车键执行查询。

可以多个条件同时输入，支持清空条件。

规范

1. 设计原则

我们将页面中的各个区域进行划分，以行为单位，也就是一个页面由多个行组成，所有的页面元素全部都归属于一个对应的行里面。

每个行可以分成多列，每个列中可以继续包含多行和多列，我们将页面中的元素全部都放到对应的列里面，每个元素都对应着我们预置的某个组件，这样就形成了整个页面。

2. 设计理念

通过json的形式对这些行、列、元素进行描述，可以指定属性、事件、方法、权限等等。页面加载时通过一个或多个这样的json就能够知道该页面的结构，从而进行页面的渲染，以及其他行为的处理。

我们将由此设计出来的json称之为数据视图，因为它通过数据的描述，能够决定页面视图的呈现。

行列

存在最外层的数组中对象的个数，即表示该数据视图包含的行数，如：[{}] 表示一行，[{},{}] 表示两行.

每一行可以包含列，列用col表示，对应数组中包含的对象个数，即表示列数，如：

[{
  col: [{
  }]
}]

上面代码表示有一行一列。

每一行是一个对象，对象中可以包含任意属性，通过col来标识包含的列。

每一列也是一个对象，列或者任意组件都具有插槽，通过以 # 开头，来表示这是一个插槽，比如：#default、#header 等等。

其中default插槽可以省略#标识，相当于关键字。

[{
  col: [{
    _span: 12,   //所占列数
    default: []  //表示行内的元素，也可理解为 default 插槽
  },{
    _span: 12,
    default: [{
      col: [{}]
    }]
  }]
}]

表示有一行两列，第二列中又包含了一行一列。关于 default 的更多信息详见

可以给行列添加任意的属性、事件等，其中key的第一个字符为 _ 的属性，将会自动绑定到该元素上面。

key中带有前缀on_的属性将被作为事件来进行处理。

[{
  _class: 'c-red b',   //所使用的样式
  '_data-role': 'first-row',  //绑定的 dataRole 属性值
  col: [{
    _class: 'p-c',
    _span: 12,
    //绑定 click 事件
    on_click: function() {
      console.log('点击了该列')
    },
    default: []
  }]
}]

其中以下划线开头的属性都会被绑定为组件的属性，以on加下划线开头的属性自动绑定为组件的事件

示例如下放入一个文字组件在列中，并居中显示。is 属性表示该组件是什么组件。

[{
  //行样式，其中有字体和字体大小等样式，详细解释后面再说。
   _class: 'mt-50 ff-zhongsong fw-700 c-red fs-33 mb-10',
  col: [{
    _span:24,
    _class: 'ta-c', //居中样式
    default: [{
      is: 'lc-text', //渲染一个 text 文本
      default: '生知安行、学知利行、困知勉行'
    }]
  }]
}]

视图渲染文字示例

is属性代表需要渲染的组件，以lc-开头，加上元素名，比如要渲染一个element-plus的按钮组件可以这样写：is:'lc-button'

注意: 这部分内容仅做理解页面结构使用，不推荐采用编辑JSON配置去开发页面，正常开发页面仅在页面设计器中拖拽组合即可完成页面搭建。

如想要知道某个页面用到的所有数据视图，可点击数据视图管理页面右上角的

寄连检索图标

输入页面的id进行查找。

项目代码中预置好了各种可能用到的组件，我们只需要指定组件名称即可将该组件渲染到页面中。

组件

我们的所有组件全部都是放在列中的，某些特殊组件可能还包含一些其他组件。

所有组件的默认内容都是用default字段来指定，如需绑定数据则用_data来绑定。

下面我们来看一个简单的例子：

首先，我们新建一行一列，并填入一些文字。

[{
  col: [{
    default: [{
      is: 'lc-text',
      default: '可视化设计页面真的是太酷啦'
    }]
  }]
}]

其中is字段是用来指定要渲染的组件，所有需要引用的组件，需要在组件名前面加上lc-前缀，如text组件的引用就是lc-text。

我们来看下页面中的渲染效果。

视图渲染文字.png

然后我们添加一些样式，来改变页面呈现。

[{
  _class: 'mt-50 ff-zhongsong fw-700 c-red fs-33 mb-10',
  col: [{
    _class: 'ta-c',
    default: [{
      is: 'lc-text',
      default: '可视化设计页面真的是太酷啦'
    }]
  }]
}]

再看下效果。

视图渲染文字样式.png

让我们再追加一列，并在第二列中添加两个元素，一个下拉框和一段文字。

[{
  _class: 'mt-50 ff-zhongsong fw-700 c-red fs-33 mb-10',
  col: [{
    _span: 15,
    _class: 'ta-c',
    default: [{
      is: 'lc-text',
      default: '可视化设计页面真的是太酷啦'
    }]
  }, {
    _span: 9,
    default: [{
      is: 'lc-select',
      _class: 'w-240 mr-10',
      model: 'learnBegin'
    }, {
      is: 'lc-text',
      default: '开始学习'
    }]
  }]
}]

看看现在的效果。

视图加下拉框.png

可以看到通过我们构造的json，页面已经能够成功解析并渲染出来，其中model字段表示如果要提交到后端的话，这个下拉框对应的key。

现在的下拉框暂时是还没有数据的，因为我们没有配置它。通过指定default我们可以对下拉框构造数据。

让我们重新设定一个json，并对下拉框添加数据。

[{
  _class: 'mt-50 ff-zhongsong fw-700 c-red fs-33 mb-10',
  col: [{
    _span: 15,
    _class: 'ta-c',
    default: [{
      is: 'lc-text',
      default: '可视化设计页面真的是太酷啦'
    }]
  }, {
    _span: 9,
    default: [{
      is: 'lc-select',
      _class: 'w-240 mr-10',
      model: 'learnBegin',
      default: [{
        is: 'lc-list',
        _data: [{
          label: '今天',
          value: 'today'
        },{
          label: '明天',
          value: 'tomorrow'
        },{
          label: '以后',
          value: 'later'
        }],
        default: [{
          is: 'lc-option',
          _label: '#label',
          _value: '#value'
        }]
      }]
    }, {
      is: 'lc-text',
      default: '开始学习'
    }]
  }]
}]

这是给下拉框添加了一个 list 组件，用来渲染选项列表，然后再给它赋值一个列表数据，并把它的默认插槽添加上 option 组件。关于 _data 更多的配置和使用信息详见

看下页面效果

视图下拉选项.png

让我们再简单的添加一个事件，在选项发生改变的时候执行操作。

[{
  _class: 'mt-50 ff-zhongsong fw-700 c-red fs-33 mb-10',
  col: [{
    _span: 15,
    _class: 'ta-c',
    default: [{
      is: 'lc-text',
      default: '可视化设计页面真的是太酷啦'
    }]
  }, {
    _span: 9,
    default: [{
      is: 'lc-select',
      _class: 'w-240 mr-10',
      model: 'learnBegin',
      default: [{
        is: 'lc-list',
        _data: [{
          label: '今天',
          value: 'today'
        },{
          label: '明天',
          value: 'tomorrow'
        },{
          label: '以后',
          value: 'later'
        }],
        default: [{
          is: 'lc-option',
          _label: '#label',
          _value: '#value'
        }]
      }],
      on_change: function(e) {
        console.log(e)
        console.log('选项值发生改变')
      },
    }, {
      is: 'lc-text',
      default: '开始学习'
    }]
  }]
}]

看下效果

视图下拉选择改变值.png

说明

所有在数据视图中指定的组件默认都是由 element-plus 中的组件来渲染的，如果需要使用 naive-ui 组件渲染，可以通过category属性来指定。

所有组件可以绑定的属性和事件都由渲染组件来决定，只要渲染组件支持，那么就可以任意绑定，除此之外，只要是vue支持的属性、方法或事件也可以指定方式进行设定。

我们还可以额外指定一些不带下划线的附加属性，之后我们可以通过对视图的引用来对这些属性进行访问。

关于更多的属性配置可以浏览参考

数据视图 ​

描述 ​

操作 ​

查询 ​

规范 ​

组件 ​

说明 ​

数据视图

描述

操作

查询

规范

组件

说明