suitList 参数展示栏

说明

1、参数展示组件，为了满足小程序开发时参数展示的样式统一 2、该组件在components公用组件中，可以在任意页面直接使用，不需要引入

普通使用

<template>
	<view class="monitorProjectAllWrapper">
		<suit-list :list="list" :info="info">
		</suit-list>
	</view>
</template>
<script>
export default {
	data() {
		return {
			list: [
				{
					title: '更新时间',
					prop: 'time'
				},
				{
					title: '运行状态',
					prop: 'runStatus',
					tag: true,
					code: '6001'
				},
				{
					title: '当前里程',
					prop: 'mile',
					code: '6007'
				},
				{
					title: '地损控制系数',
					prop: 'damageCoe',
					code: '6057'
				}
			],
			info: {
				time: '--',
				runStatus: null,
				mile: '--',
				damageCoe: '--'
			},
		}
	}
}
</script>

slot使用

<template>
	<view class="monitorProjectAllWrapper">
		<suit-list :list="list">
			<template v-slot="{item}">
				<view class="111" v-if="!item.obj.custom">
					{{item.obj.value}}
				</view>
				<view v-else>
					<suit-tag :text="item.obj.value" type="blue"></suit-tag>
				</view>
			</template>
		</suit-list>
	</view>
</template>

<script>
export default {
	data(){
		return {
			list: [
				{
					title: '更新时间',
					prop: 'time'
				},
				{
					title: '运行状态',
					prop: 'runStatus',
					tag: true,
					code: '6001'
				},
				{
					title: '当前里程',
					prop: 'mile',
					code: '6007'
				},
				{
					title: '地损控制系数',
					prop: 'damageCoe',
					code: '6057'
				}
			],
			info: {
				time: '--',
				runStatus: null,
				mile: '--',
				damageCoe: '--'
			},
		}
    }
}
</script>

参数说明

属性

属性	描述	类型	可选值	默认值
list	左侧参数名列表	Array	——	——
info	右侧参数值（键名为list中prop的值，键值为参数值）	Object	——	——

组件源码及综合示例参考

组件源码 (opens new window) 综合示例 (opens new window)