html使用ElementUI表格筛选组件

效果：

代码：

<!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.dataif (res.code === 1) {switch (imgType) {case 'child':this.baseForm.childImg = [{url: res.data}]breakcase 'house':this.baseForm.houseImg = [{url: res.data}]breakcase 'pesticide':this.baseForm.pesticideImg = [{url: res.data}]breakdefault:break}return false}const message = res.messagevant.Toast(message);}).catch(function(error) {console.log(error);})},}});</script></body>
</html>

html使用ElementUI表格筛选组件相关推荐

ElementUI 表格分页组件
ElementUI 表格分页组件 <template><div class="pagination"><el-paginationbackground ...
elementUI表格筛选统计数量
elementU表格筛选统计数量最近vue做表格的时候需要使用到筛选的功能,查了一下官方文档,有两种筛选. 一.绑定在column上的filter-method 有的人把这个叫做前端筛选,筛选需要有 ...
elementUI 表格筛选默认选中
只需要在状态行加入这个属性,就默认选中了 :filtered-value="[2]" 效果图 <el-table-columnprop="now_status&qu ...
vue ElementUI 表格筛选框的高度设置，超出一定高度，显示滚动条
相信有很多小伙伴遇到过这个问题,首先还是来看图片,筛选框我做了处理,所以和官网的有点小差别官方网站和个人网站对比图如下: 代码如下:(F12找到该元素的class,设置高度) .el-table-f ...
ant 表格自定义表头和表格筛选
1.ant 自动表格筛选组件对某一列数据进行筛选,使用列的 filters 属性来指定需要筛选菜单的列,onFilter 用于筛选当前数据,filterMultiple用于指定多选和单选. 表头设置 ...
vue elementui 表格搜索筛选栏组件封装
1.背景 vue后台管理系统,会有很多表格页面,表格上方会有一些搜索选项.表格直接使用el-table即可,而搜索栏区域每次写起来都很繁琐,且多人开发情况下每个人写的样式都不相同,布局样式无法统一. ...
element-ui表格组件table踩坑总结
table组件中,基本情况简述: element框架的table组件,内容涵盖以下总结知识点,内容比较基础,知识有点交叉.对比学习更易于理解.应用和掌握. 常用UI效果,参考点: table边框设置( ...
[Vue]如何实现一个简单的表格数据筛选查找 (根据ElementUI表格展示)(数组筛选)
[Vue]如何实现一个简单的表格数据筛选查找 (根据ElementUI表格展示)(数组筛选) 能够解决的问题在一个完整的数据数据渲染的 elementui 表格组件中,筛选输出数据目录布局代码 ...
[vue-element] ElementUI表格组件如何实现动态表头？
[vue-element] ElementUI表格组件如何实现动态表头? <template v-for="item in tableColownms"> <el ...

html使用ElementUI表格筛选组件

html使用ElementUI表格筛选组件相关推荐

最新文章

热门文章