大屏卡片列表控件使用文档

卡片列表控件使用场景

和表格一样，卡片列表控件同样是展示列表数据的控件，它可以展示列表控件，和表格不同之处在于，它可以通过一些不同的展示样式，将列表的某些数据做突出的展示。卡片列表控件适合用于列表数据字段数量不多的场合。

卡片列表控件效果图如下(仅展示效果)

设计界面

预览效果图 

相关注意事项：

1、 单个卡片盒子的宽度和高度必须设置，可以按照盒子内容的多少拖拽到合适的大小。不设置可能会有卡片不能对齐，轮播不正常的问题。
2、 可以设置展示的行数
3、 关于展示列数：本身没有关于展示列数的设置选项，但是可以增大整个卡片列表的宽度，实现增加展示列数的效果。
4、 数据的条数可能会影响展示和轮播的效果。
5、 渲染有默认渲染和自定义函数渲染两个选项，当默认渲染方式不能满足需求，请开启自定义函数渲染。自定义函数渲染需要您有一定的js基础。

关于自定义渲染函数的说明

该渲染函数提供以下参数，您可以在函数中分别打印这些参数以增进对这些参数的理解
h:基础渲染函数（createElement）
_this:整个卡片列表组件的vue对
widgetId:图表的id
boxData:当个卡片盒子的数据
fields:卡片控件的展示字段

卡片列表控件自定义渲染demo

var lis=[]
//用不同的图片标识不同的产线状态
var imgArr=[
  https://print.jimchain.com/dashboard/others/red.png,
  https://print.jimchain.com/dashboard/others/grey.png,
  https://print.jimchain.com/dashboard/others/green.png,
]
for(var i in boxData){
  if(i===name){
    lis.push(h(li,{style: {display:block,width:100%, color: #fff,fontSize:32px,border:none,textAlign:center,fontWeight:bold,background:green }},boxData[i]))
  }else if(i===hasChecked){
    lis.push(h(li,{style: {display:block,width:100%, color: #000,fontSize:32px,border:none,textAlign:center,fontWeight:bold}},[h(span,{style:{paddingRight:10px}},已检修),h(span,{style:{color:boxData[i]===true?green:red}},boxData[i]===true ? √ : x)]))
  }else{
    lis.push(h(li,{style: {display:flex,width:100%, fontSize:32px,border:none,alignItems:center,justify-content:center,fontWeight:bold,backgound:green }},[h(span,产线状态),h(img,{attrs:{src:imgArr[boxData[i]-1],alt:我是一张图片},style:{width:50px,height:50px,marginLeft:10px}})]))
  }  
}
return h(ul, {class: {show: true},style:{height:98%,border:solid 1px #000}}, lis)

拓展 关于h函数的写法拓展

// 除了类型必填以外，其他的参数都是可选的
h(div)
h(div, { id: foo })
// attribute 和 property 都能在 prop 中书写
// Vue 会自动将它们分配到正确的位置
h(div, { class: bar, innerHTML: hello })

// 像 `.prop` 和 `.attr` 这样的的属性修饰符
// 可以分别通过 `.` 和 `^` 前缀来添加
h(div, { .name: some-name, ^width: 100 })

// 类与样式可以像在模板中一样
// 用数组或对象的形式书写
h(div, { class: [foo, { bar }], style: { color: red } })

// 事件监听器应以 onXxx 的形式书写
h(div, { onClick: () => {} })

// children 可以是一个字符串
h(div, { id: foo }, hello)

// 没有 props 时可以省略不写
h(div, hello)
h(div, [h(span, hello)])

// children 数组可以同时包含 vnodes 与字符串
h(div, [hello, h(span, hello)])