<template>
	<view class="table-demo">
		<vol-alert type="primary">
			<view>direction=list + readonly=false 行内编辑；列 type 与 form 一致。</view>
		</vol-alert>
		<vol-table :readonly="false" direction="list" titleField="rowTitle" :table-data="tableData" :columns="columns" />
	</view>
</template>

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

const tableData = ref([{
	rowTitle: '表格编辑',
	inputText: '普通输入', inputRequired: '', inputReadonly: '只读不可改',
	password: '123456', textarea: '多行文本', numberVal: 100, decimalVal: 12.5, inputRange: [10, 99]
}])

const columns = ref([
	{ field: 'rowTitle', title: '标题', hidden: true },
	{ title: '普通输入', field: 'inputText', type: 'input', placeholder: '请输入' },
	{ title: '必填校验', field: 'inputRequired', type: 'input', required: true },
	{ title: '只读字段', field: 'inputReadonly', type: 'input', readonly: true },
	{ title: '密码', field: 'password', type: 'password' },
	{ title: '整数', field: 'numberVal', type: 'number', required: true },
	{ title: '小数', field: 'decimalVal', type: 'decimal' },
	{ title: '数字区间', field: 'inputRange', type: 'number', range: true },
	{ title: '多行文本', field: 'textarea', type: 'textarea', minRows: 2, maxRows: 10 }
])
</script>