[HTML] 纯文本查看 复制代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<head>
<!-- style -->
<link rel="stylesheet" href="https://unpkg.com/element-plus@2.2.17/dist/index.css" />
<!-- Vue 3 -->
<script src="https://unpkg.com/vue@3.2.40/dist/vue.global.js"></script>
<!-- component library -->
<script src="https://unpkg.com/element-plus@2.2.17/dist/index.full.js"></script>
</head>
</head>
<body>
<div id="app" style="width: 600px;">
<el-table :data="tableData">
<el-table-column v-for="(title,index) in tableHeader" :prop="title" :label="title"
:filters="index?null:tableFilters" :filter-method="index?null:filterHandler" ref="myTable" />
</el-table-column>
</el-table>
</br>
</br>
<el-button @click="clearTableFilter">重置表格的筛选</el-button>
</div>
<script>
let that = null,
{ ref } = Vue,
myTable = ref(),
App = {
data() {
return {
tableHeader: ['date', 'name', 'address', 'tag'],
tableData: [
{
date: '2016-05-03',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
tag: 'Home',
}, {
date: '2016-05-02',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
tag: 'Office',
}, {
date: '2016-05-04',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
tag: 'Home',
}, {
date: '2016-05-01',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
tag: 'Office',
}
],
tableFilters: [
{ text: '2016-05-01', value: '2016-05-01' },
{ text: '2016-05-02', value: '2016-05-02' },
{ text: '2016-05-03', value: '2016-05-03' },
{ text: '2016-05-04', value: '2016-05-04' }
]
}
},
methods: {
filterHandler(value, row, column) {
const property = column['property']
return row[property] === value
},
clearTableFilter() {
console.log('myTable', myTable);
myTable.clearFilter('date')
}
}
}
const app = Vue.createApp(App);
app.use(ElementPlus);
app.mount("#app");
</script>
</body>
</html>
发表于 2022-10-17 13:32
|
发表于 2022-10-17 14:37
