<template>
	<view class="table-demo">
		<vol-alert type="primary">
			<view>(需要在手机上或小程序预览)表头固定,且可左右可滚动</view>
		</vol-alert>
		<vol-table :height="0" direction="horizontal" :table-data="tableData" :columns="columns">
		</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: 'processCode', width: 80 },
	{ title: '工序名称', field: 'processName', width: 85 },
	{ title: '物料名称', field: 'materialName', width: 80 },
	{ title: '用料数量', field: 'materialAmount', width: 80 },
	{ title: '提交人员', field: 'submitter', width: 80 },
	{ title: '提交时间', field: 'submitTime', width: 170, type: 'date' }
])

const tableData = ref([
	{
		processCode: 'PR001',
		processName: '插轴',
		materialName: '螺丝',
		materialAmount: 100,
		submitter: '张三',
		submitTime: '2022-01-15 08:20'
	},
	{
		processCode: 'PR002',
		processName: '整平',
		materialName: '电路板',
		materialAmount: 50,
		submitter: '李四',
		submitTime: '2022-01-16 10:30'
	}
])
</script>