contentList 内容列表

背景

由于小程序多个页面都有内容数据处理

使用

<template>
  <view class="baseInfoWrapper">
    <content-list :list="list" :info="info"></content-list>
  </view>
</template>

<script>
export default {
  props: {
    info: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      list: [
        { label: '标段', prop: 'projectName' },
        {
          label: '场景',
          prop: 'sceneType',
          filter: 'getNameByCode',
          filterParams: ['scene_type'],
        },
        {
          label: '发现方式',
          prop: 'foundWay',
          filter: 'getNameByCode',
          filterParams: ['found_way'],
        },
        {
          label: '触发时间',
          prop: 'triggeringTime',
          filter: 'parseTime',
          filterParams: '{y}-{m}-{d} {h}:{i}:{s}',
        },
        { label: '触发原因', prop: 'reason' },
        {
          label: '接收时间',
          prop: 'recordCreateDate',
          filter: 'parseTime',
          filterParams: '{y}-{m}-{d} {h}:{i}:{s}',
        },
        {
          label: '处置时限',
          prop: 'processingTime',
          template: '<span>{{processingTime | contentDefault | h }}</span>',
        },
      ],
    };
  },
  mounted() {},
  methods: {},
};
</script>

参数说明

属性

属性	描述	类型	可选值	默认值
list	内容 label 的数据	Array[]	—	[]
info	内容数据	Object	—	{}
labelWidth	左边label标签宽度,单位rpx	number	—	126
labelColor	label 字体颜色	String	—	rgba(0, 0, 0, 0.65);
valueColor	行值的 字体颜色	String	—	rgba(0, 0, 0, 0.85);
valueRight	行内容右对齐	Boolean	true,false	false
showRowBottom	是否显示卡片行的下边框线条	Boolean	—	false
fontSize	行字体大小 第一个值为label 的字体大小，第二个值为右侧数据的字体大小(没有填写第二个值默认第一个值)	Array[]	—	[14]
rowPadding	行的padding	String	—	0
defaultValue	值为空时默认文本	String	—	/

list 属性

属性	描述	类型	可选值	默认值
label	行标签文本	string	—	—
prop	对应行内容的字段名(根据这个参数在 info 中匹配数据)	string	—	—
valueColor	对应行内容的字体颜色	string	—	—
template	自定义行内容模板显示	string	—	—
filter	数据过滤的选项	string	parseTime, getNameByCode	—
filterParams	数据过滤的选项的参数	string	—	—
labelWidth	卡片 body 左边label标签宽度,单位px	string	—	—
labelColor	卡片 body 左边label标签字体颜色	string	—	—

list.template 说明

list.template 使用了公共 template 方法，可以通过简单的 vue 模板方式(使用{ { } }进行匹配)，自定义行内容显示，也可以自定义过滤器
默认过滤器有parseTime,getNameByCode,contentDefault(内容格式化过滤器)

源码及综合示例参考

组件源码 (opens new window)template 方法参考 (opens new window)