效果：
代码：
<!DOCTYPE html>
<html>
<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, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover">
<title>测试</title>
<!-- 引入样式文件 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="app">
<!-- elementUI实现表格属性筛选 -->
<div>
<el-button @click="resetDateFilter">清除日期过滤器</el-button>
<el-button @click="clearFilter">清除所有过滤器</el-button>
<el-table ref="filterTable" :data="tableData" style="width: 100%">
<el-table-column prop="date" label="日期" sortable width="180" column-key="date"
:filters="[{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'}]"
:filter-method="filterHandler">
</el-table-column>
<el-table-column prop="name" label="姓名" width="180">
</el-table-column>
<el-table-column prop="address" label="地址" :formatter="formatter">
</el-table-column>
<el-table-column prop="tag" label="标签" width="100"
:filters="[{ text: '家', value: '家' }, { text: '公司', value: '公司' }]" :filter-method="filterTag"
filter-placement="bottom-end">
<template slot-scope="scope">
<el-tag :type="scope.row.tag === '家' ? 'primary' : 'success'" disable-transitions>
{{scope.row.tag}}
</el-tag>
</template>
</el-table-column>
</el-table>
</div>
</div>
<!-- 引入 Vue 和 Vant 的 JS 文件 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<!-- 引入 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<!-- axios 请求 -->
<script type="text/javascript" src="https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.js"></script>
<script>
const hades_token = {
hades_token: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9'
}
// 初始化 Vue 实例
new Vue({
el: '#app',
data() {
return {
tableData: [{
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: '公司'
}]
};
},
methods: {
resetDateFilter() {
this.$refs.filterTable.clearFilter('date');
},
clearFilter() {
this.$refs.filterTable.clearFilter();
},
formatter(row, column) {
return row.address;
},
filterTag(value, row) {
console.log(value,row)
return row.tag === value;
},
filterHandler(value, row, column) {
const property = column['property'];
return row[property] === value;
},
// 图片上传
handleUploadImage(file, imgType) {
console.log(file)
const type = file.file.name.split('.')[1]
if (!type || ['png', 'jpg'].every((item) => item !== type.toLocaleLowerCase())) {
vant.Toast('请上传jpg或png格式的图片');
return false
}
if (file.file.size > 2 * 1024 * 1024) {
vant.Toast('证件大小不能超过2M');
return false
}
let formData = new FormData();
formData.append("file", file.file);
axios.post('/sdddffffff', formData, {
headers: {
...hades_token
}
}).then(response => {
const res = response.data
if (res.code === 1) {
switch (imgType) {
case 'child':
this.baseForm.childImg = [{
url: res.data
}]
break
case 'house':
this.baseForm.houseImg = [{
url: res.data
}]
break
case 'pesticide':
this.baseForm.pesticideImg = [{
url: res.data
}]
break
default:
break
}
return false
}
const message = res.message
vant.Toast(message);
})
.catch(function(error) {
console.log(error);
})
},
}
});
</script>
</body>
</html>
