<template>
	<view class="table-demo">
		<vol-alert type="primary">
			<view>1、使用数据插槽显示操作按钮 #field（slot:true）</view>
		</vol-alert>
		<vol-table ref="tableRef" index url="api/demo_order/getPageData" :height="0"
			direction="horizontal" :table-data="tableData" :loadBefore="loadBefore"
			:loadAfter="loadAfter" :columns="columns">
			<!-- #field：对应列必须配置 slot: true，否则不生效 -->
			<template #field="{ data }">
				<view v-if="data.field === 'oper'" class="btns">
					<vol-button @click="viewClick(data)" size="small" type="primary">查看</vol-button>
					<vol-button @click="viewClick(data)" size="small" type="default">按钮</vol-button>
				</view>
			</template>
		</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 tableRef = ref(null)
const tableData = ref([])

const loadBefore = () => true
const loadAfter = () => true
const viewClick = (data) => proxy.$toast(`点击了[${data.rowIndex + 1}]行`)

const columns = ref([
	{ field: 'OrderNo', title: '订单编号', type: 'string', width: 110 },
	{
		field: 'OrderType',
		title: '订单类型',
		type: 'select',
		bind: { key: '订单类型', data: [] },
		width: 80
	},
	{
		field: 'oper',
		title: '操作按钮',
		width: 140,
		slot: true // 使用 #field 时必须配置
	}
])
</script>