_data 属性

我们在为组件做数据绑定的时候使用 _data，如 el-table 组件绑定数据的属性就是默认为这个字段，因此我们的一些自定义组件或者其他的数据绑定都统一定为 _data。

一般类似于列表或者是通过 v-for 这种形式渲染的组件，都可以为其指定一个数组，然后循环遍历进行渲染

我们通过几个常用组件的示例，来介绍一下关于 _data 属性，也就是数据属性的使用方法

在页面设计器中，只要具有 data 属性的组件，都有两种方式进行数据的指定，一种是通过绑定接口的返回值来填充数据，另一种是手动指定数据

1. 表格组件 lc-table

假设现在要做一个歌单的列表

先拖入一个表格组件，然后给它设置几个列

有歌曲名称、歌手、时长、热度这四列，目前还是一个空列表，没有歌单的数据，这四列的值分别绑定到 title、singer、time、hot 字段上面，关于如何绑定可详见 动态绑定

新建一个请求链接，并在当前页面中添加这个请求链接，该请求链接返回的数据被绑定在 songList 字段上面

点击表格属性面板的填充数据选项，列出了当前可以绑定的数据字段

请求链接返回的数据格式如下：

{
  data: [{
    title: '研文真习性',
    singer: '宋伟',
    time: '05:32',
    hot: 190
  }, {
    title: '非是象',
    singer: '蔡军',
    time: '04:26',
    hot: 844
  }, {
    title: '近铁民家装还',
    singer: '易洋',
    time: '04:36',
    hot: 783
  }, {
    title: '界常',
    singer: '范秀兰',
    time: '03:04',
    hot: 704
  }, {
    title: '更白火',
    singer: '董桂英',
    time: '03:59',
    hot: 911
  }, {
    title: '具成',
    singer: '冯敏',
    time: '02:32',
    hot: 428
  }, {
    title: '存道根效长接',
    singer: '余伟',
    time: '03:29',
    hot: 934
  }, {
    title: '会据一光住',
    singer: '贺秀英',
    time: '02:12',
    hot: 668
  }, {
    title: '解保少情打强群',
    singer: '陈敏',
    time: '03:42',
    hot: 549
  }, {
    title: '际口名线所志论',
    singer: '谭娜',
    time: '03:50',
    hot: 635
  }]
}

其中 data 字段的值就会绑定到 songList 上面，我们选中这个数据字段，列表就会自动渲染出来

2. 虚拟列表组件 lc-list

在页面设计器中拖入一个列表组件，然后在列表组件中再放入一个卡片组件

这次我们通过手动指定数据的方式来对列表进行数据绑定，数据格式如下：

[{
  name: "苹果",
  description: "苹果，学名Malus pumila Mill.，别称西洋苹果、柰，属于蔷薇科苹果属的植物 [1-2]。苹果是全球最广泛种植和销售的水果之一，具有悠久的栽培历史和广泛的分布范围。苹果的原始种群主要起源于中亚的天山山脉附近，尤其是现代哈萨克斯坦的阿拉木图地区，提供了所有现代苹果品种的基因库。苹果通过早期的贸易路线，如丝绸之路，从中亚向外扩散到全球各地。"
},{
  name: "香蕉",
  description: "香蕉（Musa acuminata '(AAA)'），英文名(banana)芭蕉科芭蕉属多年生草本植物，植株丛生，有匐匍茎；假茎浓绿有黑色斑点；叶片长圆形，上面为深绿色，无白粉，下面浅绿色；花朵为乳白色或淡紫色；果实呈弯曲的弓状，有棱，果皮为青绿色，成熟后变黄；果肉松软，黄白色，味甜香味浓，无种子。"
},{
  name: "葡萄",
  description: "葡萄（学名：Vitis vinifera L.）是葡萄科葡萄属高大缠绕藤本，幼茎秃净或略被绵毛；叶片为纸质，圆卵形或圆形；花序大而长；萼很小，为黄绿色的杯状；花柱很短，为圆锥形；浆果为卵圆形至卵状长圆形，成熟时为紫黑色或红而带青色。 [7]花期4-5月，果期8-9月。 [1]李时珍在《本草纲目》中说：葡萄，《汉书》作蒲桃，可以造酒，人哺饮之，则陶然而醉，故有是名。"
},{
  name: "西瓜",
  description: "西瓜（学名：Citrullus lanatus (Thunb.) Matsum. et Nakai），为葫芦科西瓜属 [2]一年生蔓生藤本植物 [3]，又名寒瓜、水瓜、西瓜皮等 [1]。茎、枝粗壮，被白色或淡黄褐色长柔毛。叶片纸质，轮廓三角状卵形，带白绿色。雌雄同株，雌、雄花均单生于叶腋。果实大型，近于球形或椭圆形，果皮光滑，色泽及纹饰各式。种子多数，卵形，黑色、红色，有时为白色、黄色、淡绿色或有斑纹。花果期夏季。 [3]在中国，西瓜因从西域（中国新疆和中亚一带）地区传入，因而得名西瓜，即来自西方的瓜。"
}]

然后我们将卡片的标题绑定到 name 字段，卡片的内容绑定到 description 字段

这时卡片就会通过列表进行渲染

同样，还有很多可以使用列表的组件，比如下拉框选项、单选按钮选项、多选按钮选项、折叠面板等等

通过将父组件中放入一个列表，然后再在列表中放入需要循环渲染的组件，这样就能够组合出各种各样的列表展示

列表组件中也可以放入多个组件进行组合式的循环渲染

3. 树组件 lc-tree

除了列表形式的组件可以绑定 data 属性字段，树组件也可以绑定 _data 字段

拖入一个树组件放入到页面中，然后我们绑定如下的数据：

[{
  id: 1,
  label: "一级1",
  children: [{
    id: 2,
    label: "二级1-1"
  },{
    id: 3,
    label: "二级1-2"
  }]
},{
  id: 4,
  label: "一级2",
  children: [{
    id: 5,
    label: "二级2-1",
    children: [{
      id: 6,
      label: "三级2-1-1"
    }]
  },{
    id: 7,
    label: "二级2-2"
  }]
}]

这样就渲染除了树结构