1.简述

element-ui是由饿了么前端团队推出的一套为开发者、设计师和产品经理准备的基于 vue 实现的一套不依赖业务的 UI 组件库，提供了丰富的PC端组件，减少用户对常用组件的封装，降低了开发的难易程度。而手机端有对应框架是 Mint UI 。

2.官方文档

https://element.eleme.cn/2.15/#/zh-CN/component/quickstart

3.TABLE自定义列筛选器

3.1.说明

element-ui默认的table组件支持的表头筛选器是比较简单的只支持数组的下拉单选或多选的形式，但有时候因为不同的需求不同的场景，需要支持输入框形式。

image.png

3.2.代码

  1. ////////////////////////////////////////header-tools///////////////////////////////////////
  2. <template>
  3.   <el-popover :placement="placement" :width="width" v-model="visible">
  4.     <div class="header-tools-order">
  5.       <div @click="sortOrder('ascending')" class="order-item AZ-anime"><i class="el-icon-top"></i>升序</div>
  6.       <div @click="sortOrder('descending')" class="order-item AZ-anime"><i class="el-icon-bottom"></i>降序</div>
  7.       <div @click="sortOrder(null)" class="order-item AZ-anime"><i class="el-icon-close"></i>取消排序</div>
  8.     </div>
  9.     <h3 v-text="label"></h3>
  10.     <div class="header-tools-body">
  11.       <div>
  12.         <el-select class="filter-mode-select" v-model="option.filterMode">
  13.           <el-option v-for="operation in operationList" :key="operation.value" :value="operation.value" :label="operation.label"></el-option>
  14.         </el-select>
  15.       </div>
  16.       <el-input v-if="['_null','_not_null','_in','_not_in'].indexOf(option.filterMode)<0" v-model="option.inputValue" clearable />
  17.       <el-input v-if="['_between'].indexOf(option.filterMode)>-1" v-model="option.subInputValue" clearable />
  18.       <div class="option-list-input container-flex-space-between" v-if="['_in','_not_in'].indexOf(option.filterMode)>-1" v-for="(op,opIndex) in option.optionList">
  19.         <el-input v-model="op.inputValue" @paste.native.capture.prevent="onPaste($event,opIndex)" clearable />
  20.         <div class="container-flex-space-between">
  21.           <i @click="addFilter(opIndex)" class="el-icon-circle-plus"></i>
  22.           <i v-if="option.optionList.length > 1" @click="removeFilter(opIndex)" class="el-icon-error"></i>
  23.         </div>
  24.       </div>
  25.     </div>
  26.     <div class="header-tools-footer container-flex-space-between">
  27.       <el-button size="small" @click="visible = false">关闭</el-button>
  28.       <el-button size="small" type="primary" @click="doSubmit()">确定</el-button>
  29.     </div>
  30.     <span slot="reference" class="header-tools-title">
  31.       <span :class="{'has-search':hasFilter()}" :title="label" v-text="label"></span>
  32.       <span style="white-space: nowrap;">
  33.         <span class="caret-wrapper">
  34.           <i class="sort-caret ascending"></i>
  35.           <i class="sort-caret descending"></i>
  36.         </span>
  37.         <i class="fa fa-filter AZ-anime" :class="{'has-search':hasFilter()}"></i>
  38.       </span>
  39.     </span>
  40.   </el-popover>
  41. </template>
  43. <script>
  44.   export default {
  45.     name: 'header-tools',
  46.     props: {
  47.       placement: {
  48.         type: String,
  49.         default: 'bottom'
  50.       },
  51.       width: {
  52.         type: String,
  53.         default: '240'
  54.       },
  55.       dataType: {
  56.         type: String,
  57.         default: 'string'
  58.       },
  59.       label: String,
  60.       prop: String,
  61.       mirrorProp: String //解决列的prop和headerTools的prop不一致导致不能排序问题
  62.     },
  63.     data () {
  64.       return {
  65.         visible: false,
  66.         option:{
  67.           inputValue:'',
  68.           subInputValue:'',
  69.           filterMode:'_eq',
  70.           optionList:[{
  71.             inputValue:''
  72.           }]
  73.         },
  74.         operationList:[],
  75.         stringOperation:[
  76.           {value:'_eq',label:'正好是'},
  77.           {value:'_ne',label:'不是'},
  78.           {value:'_like',label:'包含'},
  79.           {value:'_not_like',label:'不包含'},
  80.           {value:'_in',label:'在之中'},
  81.           {value:'_not_in',label:'不在之中'},
  82.           {value:'_null',label:'为空'},
  83.           {value:'_not_null',label:'不为空'}
  84.         ],
  85.         numberOperation:[
  86.           {value:'_eq',label:'等于'},
  87.           {value:'_ne',label:'不等于'},
  88.           {value:'_ge',label:'大于等于'},
  89.           {value:'_le',label:'小于等于'},
  90.           {value:'_between',label:'介于以下项之间'},
  91.           {value:'_null',label:'为空'},
  92.           {value:'_not_null',label:'不为空'}
  93.         ],
  94.         dateOperation:[
  95.           {value:'_eq',label:'正好是'},
  96.           {value:'_ne',label:'不是'},
  97.           {value:'_ge',label:'晚于'},
  98.           {value:'_le',label:'早于'},
  99.           {value:'_between',label:'介于以下时间之间'},
  100.           {value:'_null',label:'为空'},
  101.           {value:'_not_null',label:'不为空'}
  102.         ]
  103.       }
  104.     },
  105.     mounted : function() {
  106.       this.$emit('regist-component', this);
  107.       this.operationList =
  108.       this.dataType == 'string'? this.stringOperation :
  109.       this.dataType == 'number'? this.numberOperation :
  110.       this.dataType == 'date'? this.dateOperation :
  111.       this.stringOperation;
  112.     },
  113.     computed: {
  114.       defaultTheme () {
  115.         return this.$store.state.config.defaultTheme
  116.       }
  117.     },
  118.     methods: {
  119.       addFilter (optionIndex) {
  120.         this.option.optionList.splice(optionIndex+1,0,{
  121.           inputValue:'',
  122.           filterMode:'_eq'
  123.         })
  124.       },
  125.       removeFilter (optionIndex) {
  126.         this.option.optionList.splice(optionIndex,1);
  127.       },
  128.       hasFilter () {
  129.         if(this.option.inputValue || this.option.subInputValue){
  130.           return true;
  131.         }else{
  132.           if(this.option.optionList && this.option.optionList.length){
  133.             for(var i = 0; i < this.option.optionList.length; i++){
  134.               if (this.option.optionList[i].inputValue) {
  135.                 return true;
  136.               }
  137.             }
  138.           }
  139.           return false;
  140.         }
  141.       },
  142.       doSubmit () {
  143.         var option = {
  144.           prop: this.prop,
  145.           option: this.option,
  146.           label: this.label
  147.         };
  148.         for (var i = 0; i < this.operationList.length; i++) {
  149.           if (this.option.filterMode == this.operationList[i].value) {
  150.             option.operationLabel = this.operationList[i].label;
  151.             break;
  152.           }
  153.         }
  154.         this.$emit('apply-option', option)
  155.         this.visible = false;
  156.       },
  157.       sortOrder (sort) {
  158.         var option = {
  159.           prop: this.prop,
  160.           sort: sort
  161.         };
  162.         if(this.mirrorProp) {
  163.           option['mirrorProp'] = this.mirrorProp
  164.         }
  165.         this.$emit('sort-order', option);
  166.         this.visible = false;
  167.       },
  168.       clearFilter () {
  169.         this.option = {
  170.           inputValue:'',
  171.           subInputValue:'',
  172.           filterMode:'_eq',
  173.           optionList:[{
  174.             inputValue:''
  175.           }]
  176.         }
  177.       },
  178.       onPaste(e,index){
  179.         var _this = this;
  180.         var rows = e.clipboardData.getData('text').split('\n');
  181.         //去除最后一位空位
  182.         if (!rows[rows.length-1]) {
  183.           rows.splice(rows.length-1,1);
  184.         }
  185.         //去重
  186.         var obj = {};
  187.         var resultRows = []
  188.         rows.forEach(function(row){
  189.           if(!obj[row]){
  190.             resultRows.push(row);
  191.           }
  192.           obj[row]=true;
  193.         });
  194.         if(resultRows && resultRows.length){
  195.           resultRows.forEach(function(row,rowIndex){
  196.             if (_this.option.optionList.length<=index+rowIndex) {
  197.               _this.option.optionList.push({inputValue:row})
  198.             }else{
  199.               _this.option.optionList[index+rowIndex].inputValue = row;
  200.             }
  201.           });
  202.         }
  203.       }
  204.     }
  205.   }
  206. </script>
  208. <style lang="scss" scoped>
  209. @import '@/assets/scss/element-variables.scss';
  210.   h3{
  211.     margin: 10px 0;
  212.   }
  214.   .header-tools-title{
  215.     display: flex;
  216.     align-items: center;
  217.     justify-content: space-between;
  218.     line-height: 1.1;
  219.     white-space: normal;
  220.     word-break: break-word;
  221.   }
  223.   .header-tools-title>span:first-child{
  224.     display:-webkit-box;
  225.     overflow:hidden;
  226.     white-space:normal !important;
  227.     text-overflow:ellipsis;
  228.     word-wrap:break-word;
  229.     -webkit-line-clamp:2;
  230.     -webkit-box-orient:vertical;
  231.   }
  233.   .header-tools-title i{
  234.     cursor: pointer;
  235.   }
  237.   .filter-mode-select{
  238.     width: 100px;
  239.   }
  241.   .filter-mode-select ::v-deep .el-input .el-input__inner{
  242.     padding-left: 0px;
  243.     border: none;
  244.   }
  246.   .header-tools-footer{
  247.     margin-top: 10px;
  248.   }
  250.   .header-tools-order {
  251.     border-bottom: 1px solid #EBEEF5;
  252.     padding-bottom: 10px;
  253.     font-size: $--font-size-small;
  255.     .order-item {
  256.       padding-top: 3px;
  257.       padding-bottom: 3px;
  258.     }
  260.     ::v-deep div{
  261.       padding: 5px 0px;
  262.       border-radius: 4px;
  263.       cursor: pointer;
  264.     }
  266.     ::v-deep div:hover{
  267.       background-color: #409EFF;
  268.       color: white;
  269.     }
  271.   }
  273.   .has-search{
  274.     color: #409EFF;
  275.   }
  277.   .header-tools-body{
  278.     max-height: 320px;
  279.     overflow: auto;
  280.     scrollbar-width: none; /* firefox */
  281.     -ms-overflow-style: none; /* IE 10+ */
  283.     ::v-deep i {
  284.       color: #409EFF;
  285.       margin-left: 10px;
  286.       font-size: 16px;
  287.     }
  288.   }
  290.   .header-tools-body::-webkit-scrollbar {
  291.     display: none; /* Chrome Safari */
  292.   }
  294.   .el-table .header-tools-title .caret-wrapper .sort-caret{
  295.     border-top-color: transparent;
  296.     border-bottom-color: transparent;
  297.   }
  298.   .el-table .ascending .header-tools-title .sort-caret.ascending {
  299.     border-bottom-color: #409EFF;
  300.   }
  301.   .el-table .descending .header-tools-title .sort-caret.descending {
  302.     border-top-color: #409EFF;
  303.   }
  305.   .el-input+.el-input,
  306.   .option-list-input+.option-list-input{
  307.     margin-top: 4px;
  308.   }
  310.   .el-select-dropdown__item {
  311.     font-size: $--font-size-small;
  312.   }
  313. </style>
  314. <style>
  315.   .header-tools-tag{
  316.     background-color: #ecf5ff;
  317.     color: #409eff;
  318.     border: 1px solid #d9ecff;
  319.     padding: 9px 15px;
  320.     line-height: 1;
  321.     height: 32px;
  322.     margin-top: 5px;
  323.   }
  324.   .header-tools-tag+.header-tools-tag{
  325.     margin-bottom: 0px;
  326.     margin-left: 10px;
  327.   }
  328.   .header-tools-tag .el-icon-close{
  329.     color: #409eff;
  330.   }
  331.   .header-tools-tag .el-tag__close:hover{
  332.     background-color: #409eff;
  333.     color: #FFFFFF;
  334.   }
  335.   .header-tools-tag-field{
  336.     width: auto;
  337.     max-width: 50%;
  338.     overflow: auto;
  339.     display: inline-block;
  340.     vertical-align: top;
  341.     margin: -5px 10px 0px 10px;
  342.   }
  343. </style>
  346. //////////////////////////////////element-variables.scss//////////////////////////////////
  347. // zhimi variables
  348. $zm-size-base: 13px;
  350. // element variables
  351. /* 改变主题色变量 */
  352. $--color-primary: #1D4ED8;
  353. $--color-success: #047857;
  354. $--color-warning: #D97706;
  355. $--color-danger: #B91C1C;
  356. $--color-info: #7F8082;
  358. // 字体
  359. // $--font-size-extra-large: 20px;
  360. // // 18px
  361. // $--font-size-large: 18px;
  362. // // 16px
  363. // $--font-size-medium: 16px;
  364. // // 14px
  365. $--font-size-base: $zm-size-base;
  366. // // 13px
  367. // $--font-size-small: 13px;
  368. // // 12px
  369. // $--font-size-extra-small: 12px;
  370. // // 500
  371. // $--font-weight-primary: 500;
  372. // // 100
  373. // $--font-weight-secondary: 100;
  374. // // 24px
  375. // $--font-line-height-primary: 2;
  376. // // 16px
  377. // $--font-line-height-secondary: 1.12;
  379. $--menu-item-font-size: 14px;
  381. /* 改变 icon 字体路径变量，必需 */
  382. $--font-path: '~element-ui/lib/theme-chalk/fonts';
  383. @import "~element-ui/packages/theme-chalk/src/index";