<template>
	<view class="table-demo">
		<vol-alert type="primary">
			<view>级联 cascader（checkStrictly 任意/末级节点）、treeSelect、省市区 city；@onChange(field, value, row)。</view>
		</vol-alert>
		<vol-table :readonly="false" direction="list" titleField="rowTitle" :table-data="tableData"
			:columns="columns" @onChange="onChange" />
	</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 onChange = (field, value, row) => { proxy.$toast(`${field}=${value}`) }

const columns = ref([
	{ field: 'rowTitle', title: '标题', hidden: true },
	{ type: 'group', title: '树形级联' },
	{ title: '任意节点', field: 'cascaderAny', type: 'cascader', checkStrictly: true, bind: { key: 'tree_roles', data: [] } },
	{ title: '仅末级', field: 'cascaderLeaf', type: 'cascader', checkStrictly: false, bind: { key: 'tree_roles', data: [] } },
	{
		title: '自定义 data', field: 'cascaderCustom', type: 'cascader',
		bind: { data: [
			{ id: '001', parentId: null, name: '一级节点' },
			{ id: '002', parentId: '001', name: '二级节点' }
		]}
	},
	{ type: 'group', title: '树选/省市区' },
	{ title: '树形选择', field: 'treeSelectVal', type: 'treeSelect', bind: { key: 'tree_roles', data: [] } },
	{ title: '省市区县', field: 'province', type: 'city' }
])

const tableData = ref([{
	rowTitle: '级联示例', cascaderAny: null, cascaderLeaf: null,
	cascaderCustom: '004', treeSelectVal: null, province: '北京市,北京市,海淀区'
}])
</script>