<template>
	<view class="table-demo">
		<vol-alert type="primary">
			<view>标题位置 labelPosition：left/right/top；标题宽度 labelWidth；columns 数组嵌套同行字段。</view>
		</vol-alert>
		<vol-table :readonly="false" direction="list" titleField="rowTitle"
			:label-position="labelPosition" :label-width="labelWidth"
			:table-data="tableData" :columns="columns" />
		<vol-button size="small" @click="labelWidth = labelWidth === 80 ? 100 : 80">宽度</vol-button>
		<vol-button size="small" @click="labelPosition = 'left'">靠左</vol-button>
		<vol-button size="small" @click="labelPosition = 'right'">靠右</vol-button>
		<vol-button size="small" @click="labelPosition = 'top'">靠上</vol-button>
	</view>
</template>

<!--
更多表单配置：http://app.volcore.xyz/docs/app/form/
更多表格配置：http://app.volcore.xyz/docs/app/table/
-->
<script setup>
import { ref } from 'vue'
const labelWidth = ref(80)
const labelPosition = ref('left')

const columns = ref([
	{ field: 'rowTitle', title: '标题', hidden: true },
	{ title: '订单号', field: 'orderNo', type: 'input', required: true },
	{ title: '客户名称', field: 'customer', type: 'input' },
	[{ title: '数量', field: 'qty', type: 'number' }, { title: '金额', field: 'amount', type: 'decimal' }],
	{ title: '备注', field: 'remark', type: 'textarea', minRows: 2 }
])

const tableData = ref([{ rowTitle: '布局示例', orderNo: 'SO001', customer: '示例客户', qty: 12, amount: 1280.5, remark: '布局演示' }])
</script>