<template>
  <div>
    <el-table :data="tableData2" class="table-operate-basic" style="width: 100%">
			<el-table-column prop="date">
				<template #header>
					<table-header-filter label="日期" :filterList="filterList" :filters="filters" placement="bottom" @confirmFilter="(list)=>confirmFilter(list, 'date')"></table-header-filter>
				</template>
			</el-table-column>
			<el-table-column prop="name" label="姓名"></el-table-column>
			<el-table-column prop="address" label="地址"></el-table-column>
		</el-table>
  </div>
</template>

<script setup>
import {
  reactive,
  toRefs
} from 'vue';
const data = reactive({
	tableData2: [
    {
      date: '2016-05-02',
      name: '王小虎',
      address: '上海市普陀区金沙江路 1518 弄',
      tag: '家'
    },
    {
      date: '2016-05-04',
      name: '王小虎',
      address: '上海市普陀区金沙江路 1517 弄',
      tag: '公司'
    }
  ],
  filters: [],
  filterList: [
    { text: '测试1', value: '1' },
    { text: '测试2', value: '21' },
    { text: '测试2', value: '22' },
    { text: '测试2', value: '23' },
    { text: '测试2', value: '24' },
    { text: '测试2', value: '25' },
    { text: '测试2', value: '256' },
    { text: '测试2', value: '26' },
    { text: '测试2sddsdsdsdsdsdsddddddddddddddddddddd', value: '27' }
  ],
})
const {
  tableData2,
  filters,
  filterList
} = toRefs(data)
const confirmFilter = (list, column) =>{
  data.filters = list
  console.log(list, column)
}
</script>
<style>
.table-operate-basic table {
  margin: 0 !important;
}
</style>