<template>
	<view class="table-demo">
		<vol-alert type="primary">
			<view>1、column.type='img' 显示缩略图</view>
			<view>2、字段值支持逗号分隔多图或数组，点击可预览</view>
		</vol-alert>
		<vol-table direction="horizontal" :textInline="false" :table-data="tableData"
			:columns="columns" :height="0" index>
		</vol-table>
	</view>
</template>

<!--
更多表单配置：http://app.volcore.xyz/docs/app/form/
更多表格配置：http://app.volcore.xyz/docs/app/table/
-->
<script setup>
import { ref } from 'vue'

const columns = ref([
	{ title: '商品名称', field: 'name', width: 100 },
	{ title: '图片', field: 'img', type: 'img', width: 120 },
	{ title: '价格', field: 'price', width: 70 },
	{ title: '库存', field: 'qty', width: 60 },
	{ title: '备注', field: 'remark', width: 120 }
])

const tableData = ref([
	{
		name: '蓝牙耳机',
		img: '/static/icon/11.png,/static/icon/26.png',
		price: 199,
		qty: 120,
		remark: '多图逗号分隔'
	},
	{
		name: '机械键盘',
		img: '/static/icon/31.png',
		price: 399,
		qty: 56,
		remark: '单图'
	}
])
</script>