欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2023-11-10 15:00:40
公司有一个新的需求,点击eltablecolumn的头部可以进行搜索,这个功能同事已经做出来了,但是使用有些不方便,自己就打算封装成一个组件,学习一下。 eltabl...

公司有一个新的需求,点击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>

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

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