<template>
	<view class="table-demo">
		<vol-alert type="primary">
			<view>高度=0时默认为页面剩余可用高度(100%高度)</view>
			<view>高度=-1时，不固定高度，内容有多长就显示多高</view>
			<view>其他自定义高度，指定固定高度值。</view>
		</vol-alert>
		<view class="btns">
			<vol-button type="error" @click="btn1Click">固定高度</vol-button>
			<vol-button type="primary" @click="btn2Click">100%高度</vol-button>
			<vol-button type="default" @click="btn3Click">不固定高度</vol-button>
		</view>
		<vol-table ref="tableRef" :height="height" :textInline="false" 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, getCurrentInstance } from 'vue'

const { proxy } = getCurrentInstance()
const height = ref(0)
const tableRef = ref()

const btn1Click = () => { height.value = 200; proxy.$toast('固定高度为200') }
const btn2Click = () => { height.value = 0; proxy.$toast('高度已设置为自适应，滚动屏幕看效果') }
const btn3Click = () => { height.value = -1; proxy.$toast('高度设置成功，滚动屏幕看效果') }

const columns = ref([
	{ title: '工序编号', field: 'processCode', width: 80 },
	{ title: '工序名称', field: 'processName', width: 85 },
	{ title: '物料名称', field: 'materialName', width: 80 },
	{ title: '用料数量', field: 'materialAmount', width: 80 }
])

const tableData = ref([
	{ processCode: 'PR001', processName: '插轴', materialName: '螺丝', materialAmount: 100 },
	{ processCode: 'PR002', processName: '整平', materialName: '电路板', materialAmount: 50 }
])
</script>