详解VUE 对element-ui中的ElTableColumn扩展


Posted in Javascript onMarch 28, 2018

公司有一个新的需求,点击ElTableColumn的头部可以进行搜索,这个功能同事已经做出来了,但是使用有些不方便,自己就打算封装成一个组件,学习一下。

ElTableColumn本来是这个样子的:

详解VUE 对element-ui中的ElTableColumn扩展

要做成的是这个样子:

详解VUE 对element-ui中的ElTableColumn扩展

我直接就放代码了,挨着挨着说明太多了。

代码的结构:

详解VUE 对element-ui中的ElTableColumn扩展

组件

<!-- ElTableColumnPro.vue -->
<template>
   <el-table-column v-if="visible" :formatter="formatter" :align='align' :prop="prop" :header-align="headerAlign" :label="label" :width="width" :render-header="renderHeader" >
     <template slot-scope="scope">
      <slot :row="scope.row" :$index="scope.$index" >
       <span>{{fomatMethod(scope.row[prop])}}</span>
      </slot>
     </template>
   </el-table-column>
</template>

<script>
import moment from "moment";

export default {
 name: "el-table-column-pro",
 props: {
  prop: {
   type: String
  },
  label: {
   type: String
  },
  width: {
   type: Number
  },
  renderType: {
   type: String,
   validator: value => ["date", "input", "select"].includes(value)
  },
  placeholder: {
   type: String
  },
  rederWidth: {
   type: String,
   default: "230px"
  },
  param: {
   type: String,
   default: ""
  },
  startDate: {
   type: String
  },
  endDate: {
   type: String
  },
  selectList: {
   type: Array
  },
  isClear: {
   type: Boolean,
   default:true
  },
  visible: {
   type: Boolean,
   default: true
  },
  filterIcon: {
   type: String,
   default: "el-icon-search"
  },
  callback: {
   type: Function
  },
  formatter: {
   type: Function,
   default:(row, column, cellValue)=>cellValue
  },
  align:{
   type:String 
  },
  headerAlign:{
   type:String
  }
 },
 data() {
  return {
   formatD:this.filterIcon
  };
 },
 
 methods: {

  fomatMethod(value){
   return this.formatter('','',value)
  },
  
  renderHeader(createElement, { column, $index }) {
   switch (this.renderType) {
    case "date":
     return this.renderDate(createElement, { column, $index });

    case "input":
     return this.rederInput(createElement, { column, $index });
     
    case "select":
     return this.rederSelect(createElement, { column, $index });
    
    default:
     return column.label;
   }
  },

  rederInput(createElement, { column, $index }) {
   return createElement(
    "div",
    {
     class: "filters",
     style: {
      color: column.color
     }
    },
    [
     createElement(
      "el-popover",
      {
       props: {
        placement: "bottom",
        width: "200",
        trigger: "click"
       }
      },
      [
       createElement("el-input", {
        props: {
         placeholder: this.placeholder,
         value: this.param
        },
        nativeOn: {
         keyup: event => {
          if (event.keyCode === 13) {
           this.$emit("update:param", event.target.value);
           this.callback && this.callback();
          }
         }
        },
        on: {
         blur: event => {
          this.$emit("update:param", event.target.value);
          this.callback && this.callback();
         }
        }
       }),
       createElement(
        "span",
        {
         slot: "reference"
        },
        [
         column.label,
         createElement("i", {
          class: this.filterIcon,
          style: {
           marginLeft: "4px"
          }
         })
        ]
       )
      ]
     )
    ]
   );
  },

  rederSelect(createElement, { column, $index }) {
   return createElement(
    "div",
    {
     class: "filters",
     style: {
      color: column.color
     }
    },
    [
     createElement(
      "el-popover",
      {
       props: {
        placement: "bottom",
        width: "200",
        trigger: "click"
       }
      },
      [
       createElement(
        "el-select",
        {
         props: {
          placeholder: this.placeholder,
          value: this.param,
          clearable: this.isClear
         },
         on: {
          input: value => {
           this.$emit("update:param", value);
           this.callback && this.callback();
          }
         }
        },
        [
         this.selectList.map(item => {
          return createElement("el-option", {
           props: {
            value: item.value,
            label: item.label
           }
          });
         })
        ]
       ),
       createElement(
        "span",
        {
         slot: "reference"
        },
        [
         column.label,
         createElement("i", {
          class: this.filterIcon,
          style: {
           marginLeft: "4px"
          }
         })
        ]
       )
      ]
     )
    ]
   );
  },

  renderDate(createElement, { column, $index }) {
   return createElement(
    "div",
    {
     class: "filters"
    },
    [
     createElement(
      "el-popover",
      {
       props: {
        placement: "bottom",
        width: this.rederWidth,
        trigger: "click"
       }
      },
      [
       createElement("el-date-picker", {
        props: {
         placeholder: this.placeholder,
         value: this.value,
         type: "daterange",
         rangeSeparator:"至",
         startPlaceholder:"开始日期",
         endPlaceholder:"结束日期",
        },
        style: {
         width: this.rederWidth
        },
        on: {
         input: value => {
          if (value) {
           const startDate = moment(value[0]).format("YYYY-MM-DD");
           const endDate = moment(value[1]).format("YYYY-MM-DD");
           this.$emit("update:startDate", startDate);
           this.$emit("update:endDate", endDate);
           this.callback && this.callback();
          }
         }
        }
       }),
       createElement(
        "span",
        {
         slot: "reference"
        },
        [
         column.label,
         createElement("i", {
          class: this.filterIcon,
          style: {
           marginLeft: "4px"
          }
         })
        ]
       )
      ]
     )
    ]
   );
  }
 }
};
</script>
<!-- index.js -->
import ElTableColumnPro from './ElTableColumnPro'
ElTableColumnPro.install = function(Vue) {
 Vue.component(ElTableColumnPro.name, ElTableColumnPro);
};
export default ElTableColumnPro;

安装

import ElTableColumnPro from 'components/ElTableColumnPro/index' 
...
...
...

Vue.use(ElTableColumnPro)

使用

<el-table :data="bankFlow" style="width:100%" stripe>
    <el-table-column-pro :visible="showMore" prop="transactionId" label="流水号" :width="120"> </el-table-column-pro>
    <el-table-column-pro prop="clientCode" label="客户代码 " :width="120" placeholder="请输入客户代码" :callback="requestTransactionLogs" renderType="input" :param.sync="request_params.clientCode"> </el-table-column-pro>
    <el-table-column-pro prop="eventTypeName" label="事件 " placeholder="请选择事件"  :selectList="listEventEnum" :callback="requestTransactionLogs" renderType="select" :param.sync="request_params.event" :width="100"> </el-table-column-pro>
    <el-table-column-pro prop="createTime" :callback="requestTransactionLogs" :startDate.sync="request_params.startDate" :endDate.sync="request_params.endDate" :formatter="$timeformat" label="时间" renderType="date" :width="180" ></el-table-column-pro>
 </el-table>
<el-table :data="lists.content" v-loading="loading" @row-dblclick="detail" >
    <el-table-column-pro :width="120" prop="clientCode" label="客户代码 " align="center" header-align="center" placeholder="请输入客户代码" :callback="getLists" renderType="input" :param.sync="params.clientCode"></el-table-column-pro>      
    <el-table-column-pro label="内容 " placeholder="请输入内容" :callback="getLists" renderType="input" :param.sync="params.content">
        <template slot-scope="scope">
           <pre>{{scope.row.content}}</pre>
        </template>
    </el-table-column-pro>
    <el-table-column-pro prop="userName" :width="100" label="记录人 " align="center" header-align="center" placeholder="请输入记录人" :callback="getLists" renderType="input" :param.sync="params.userName"></el-table-column-pro>
    <el-table-column prop="createTime" width="150" label="记录时间" align="center" header-align="center" :formatter="$dateTimeFormat"></el-table-column>
 </el-table>

注释就不挨着打了....

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
解决遍历时Array.indexOf产生的性能问题
Jul 03 Javascript
JS跨域总结
Aug 30 Javascript
javascript实现的元素拖动函数宿主为浏览器
Jul 21 Javascript
js中取得变量绝对值的方法
Jan 03 Javascript
js中不同的height, top的区别对比
Sep 24 Javascript
javascript函数自动执行常用方法汇总
Mar 28 Javascript
Bootstrap嵌入jqGrid,使你的table牛逼起来
May 05 Javascript
关于AngularJs数据的本地存储详解
Jan 20 Javascript
angular+bootstrap的双向数据绑定实例
Mar 03 Javascript
ionic3 懒加载
Aug 16 Javascript
webpack-mvc 传统多页面组件化开发详解
May 07 Javascript
element-ui 文件上传修改文件名的方法示例
Nov 05 Javascript
微信小程序之分享页面如何返回首页的示例
Mar 28 #Javascript
js中el表达式的使用和非空判断方法
Mar 28 #Javascript
JS实现左边列表移到到右边列表功能
Mar 28 #Javascript
JS中用EL表达式获取上下文参数值的方法
Mar 28 #Javascript
jQuery实现文字超过1行、2行或规定的行数时自动加省略号的方法
Mar 28 #jQuery
vue渲染时闪烁{{}}的问题及解决方法
Mar 28 #Javascript
浅谈js获取ModelAndView值的问题
Mar 28 #Javascript
You might like
NO3第三帝国留言簿制作过程
2006/10/09 PHP
php制作动态随机验证码
2015/02/12 PHP
PHP提取字符串中的手机号正则表达式怎么写
2017/07/17 PHP
PHP 7安装使用体验之性能大提升,兼容性强,扩展支持不够(升级PHP要谨慎)
2017/07/27 PHP
用js生产批量批处理执行命令
2008/07/28 Javascript
JS 的应用开发初探(mootools)
2009/12/19 Javascript
初试jQuery EasyUI 使用介绍
2010/04/01 Javascript
基于jQuery的淡入淡出可自动切换的幻灯插件
2010/08/24 Javascript
jQuery自动切换/点击切换选项卡效果的小例子
2013/08/12 Javascript
jquery的map与get方法详解
2013/11/04 Javascript
JavaScript原生对象之String对象的属性和方法详解
2015/03/13 Javascript
全面解析Bootstrap表单样式的使用
2016/09/09 Javascript
JavaScript 是什么意思
2016/09/22 Javascript
node.js文件上传处理示例
2016/10/27 Javascript
js实现数组去重方法及效率?Ρ? target=
2017/02/14 Javascript
Angularjs 实现移动端在线测评效果(推荐)
2017/04/05 Javascript
详解angularjs利用ui-route异步加载组件
2017/05/21 Javascript
Vue学习笔记之表单输入控件绑定
2017/09/05 Javascript
vue如何截取字符串
2019/05/06 Javascript
JS实现简易计算器
2020/02/14 Javascript
JS异步宏队列微队列原理详解
2020/09/09 Javascript
python获取本机mac地址和ip地址的方法
2015/04/29 Python
python类装饰器用法实例
2015/06/04 Python
使用Python保存网页上的图片或者保存页面为截图
2016/03/05 Python
python获取多线程及子线程的返回值
2017/11/15 Python
查看Python依赖包及其版本号信息的方法
2019/08/13 Python
python实现双色球随机选号
2020/01/01 Python
Python API len函数操作过程解析
2020/03/05 Python
使用python+poco+夜神模拟器进行自动化测试实例
2020/04/23 Python
Html5实现首页动态视频背景的示例代码
2019/09/25 HTML / CSS
JAVA招聘远程笔试题
2015/07/23 面试题
活动宣传策划方案
2014/05/23 职场文书
户外宣传策划方案
2014/05/25 职场文书
信访维稳承诺书
2015/05/04 职场文书
简短清晨问候语
2015/11/10 职场文书
Windows Server 2012 R2 磁盘分区教程
2022/04/29 Servers