<template>
  <div>
    <el-table :data="tableData" class="table-operate-basic" style="width: 100%">
			<el-table-column prop="date" label="日期">
			</el-table-column>
			<el-table-column prop="name" label="姓名"></el-table-column>
			<el-table-column prop="address" label="地址">
			</el-table-column>
			<el-table-column prop="address" label="操作" width="250">
				<template #default="scope">
					<table-operate
						v-if="scope.$index < 3"
						:row="scope.row"
						:showButtons="[
							{
								btnName: '开发1',
								cb: testCb1,
								disabled: true
							},
							{
								btnName: '开发2',
								cb: testCb1,
								style: 'color: red'
							}
						]"
						:hideButtons="[
							{
								btnName: '开发1ssssssssssssssssss',
								cb: testCb1,
								disabled: true
							},
							{
								btnName: '开发2',
								cb: testCb1
							}
						]"
					></table-operate>
					<table-operate
						v-else
						:row="scope.row"
						:buttonList="[
							{
								btnName: '按钮1',
								cb: () => {}
							},
							{
								btnName: '按钮2',
								cb: () => {}
							},
							{
								btnName: '按钮3',
								cb: () => {},
								hide: true
							},
							{
								btnName: '按钮4',
								cb: () => {},
								visiable: true
							},
							{
								btnName: '按钮5',
								cb: () => {}
							},
						]"
						:showNum="2"
					></table-operate>
				</template>
			</el-table-column>
		</el-table>
  </div>
</template>

<script setup>
import {
  ref
} from 'vue';
const tableData = ref([
	{
		date: '2016-05-02',
		name: '王小虎',
		address: '上海市普陀区金沙江路 1518 弄',
		tag: '家'
	},
	{
		date: '2016-05-04',
		name: '王小虎',
		address: '上海市普陀区金沙江路 1517 弄',
		tag: '公司'
	},
	{
		date: '2016-05-01',
		name: '王小虎',
		address: '上海市普陀区金沙江路 1519 弄',
		tag: '家'
	},
	{
		date: '2016-05-03',
		name: '王小虎',
		address: '上海市普陀区金沙江路 1516 弄',
		tag: '公司'
	}
]);
const testCb1 = (row) => {
	alert(row)
}
</script>
<style>
.table-operate-basic table {
  margin: 0 !important;
}
</style>