Detailed explanation of VUE's extension of ElTableColumn in element-ui-JS Tutorial-php.cn

Detailed explanation of VUE's extension of ElTableColumn in element-ui

亚连

Release： 2018-05-28 15:49:18

Original

4265 people have browsed it

This article mainly introduces the detailed explanation of VUE's ElTableColumn extension in element-ui. Now I share it with you and give it as a reference.

The company has a new requirement. Click on the head of ElTableColumn to search. My colleagues have already made this function, but it is a bit inconvenient to use. I plan to encapsulate it into a component and learn about it.

ElTableColumn originally looked like this:

What it wants to do is like this:

I’ll just put the code directly, it’s too much to explain one after another.

Structure of the code:

Components

<!-- ElTableColumnPro.vue -->
<template>
   <el-table-column v-if="visible" :formatter="formatter" :align=&#39;align&#39; :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(&#39;&#39;,&#39;&#39;,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(
    "p",
    {
     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(
    "p",
    {
     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(
    "p",
    {
     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 &#39;./ElTableColumnPro&#39;
ElTableColumnPro.install = function(Vue) {
 Vue.component(ElTableColumnPro.name, ElTableColumnPro);
};
export default ElTableColumnPro;

Copy after login

Install

import ElTableColumnPro from &#39;components/ElTableColumnPro/index&#39; 
...
...
...

Vue.use(ElTableColumnPro)

Copy after login

Use

 <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>

Copy after login

 <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 class="brush:php;toolbar:false">{{scope.row.content}}

Copy after login

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Ajax return value automatically adds pre tag solution

ajax uses actions with different namespaces Method

#Use ajax to preview the link and you can see the content of the link

The above is the detailed content of Detailed explanation of VUE's extension of ElTableColumn in element-ui. For more information, please follow other related articles on the PHP Chinese website!