<template>
	<view class="table-demo">
		<vol-alert type="primary">
			<view>1、单元格点击事件、formatter格式化</view>
			<view>2、数据插槽 #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">
					<view style="width: 40px;"><vol-button @click="viewClick(data)" size="small"
							type="primary">查看</vol-button></view>
					<view style="width: 40px;padding-left:56rpx"><vol-button size="small" type="default">按钮</vol-button>
					</view>
				</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 + '按钮')

const columns = ref([
	{
		field: 'OrderNo',
		title: '点击事件',
		type: 'string',
		width: 110,
		formatter: (row, column, rowIndex) => {
			return '<div style="color:#192fe8;overflow: hidden;">' + (row.OrderNo || '') + '</div>'
		},
		click: (row, column, rowIndex, rows) => {
			proxy.$toast(`点击了第${rowIndex + 1}行,${row.OrderNo || ''}`)
		}
	},
	{
		field: 'oper',
		title: '按钮',
		width: 60,
		align: 'center',
		headerSlot: true, // 使用 #columnHeader 时必须配置
		formatter: (row, column, rowIndex) => {
			return '<div style="color:#192fe8;text-align: center;">查看</div>'
		},
		click: (row, column, rowIndex, rows) => {
			proxy.$toast(`点击了第${rowIndex + 1}行,${row.OrderNo || ''}`)
		}
	},
	{
		field: 'oper',
		title: '操作按钮',
		width: 140,
		slot: true // 使用 #field 时必须配置
	}
])
</script>