ElTableColumn의 내용을 사용자 정의하는 방법

이번에는 ElTableColumn의 컨텐츠를 커스터마이징하는 방법과 ElTableColumn의 컨텐츠를 커스터마이징할 때 주의사항은 무엇인지 알려드리겠습니다. 다음은 실제 사례입니다.

회사에서 새로운 요구 사항이 있어서 검색하려면 ElTableColumn의 헤드를 클릭하세요. 동료들이 이미 이 기능을 만들었지만 사용하기에는 조금 불편합니다.

ElTableColumn은 원래 이런 모습이었습니다.

하고 싶은 일은 이렇습니다.

코드를 직접 넣었을 뿐이라 일일이 설명하기에는 너무 많습니다.

코드 구조:

Component

<!-- 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('','',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 './ElTableColumnPro'
ElTableColumnPro.install = function(Vue) {
 Vue.component(ElTableColumnPro.name, ElTableColumnPro);
};
export default ElTableColumnPro;

Installation

import ElTableColumnPro from 'components/ElTableColumnPro/index' 
...
...
...
Vue.use(ElTableColumnPro)

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>

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

                         

댓글은 나란히 입력되지 않습니다....

이후에는 방법을 마스터했다고 믿습니다. 이 기사의 사례를 읽으면서 더 흥미로운 내용을 보려면 PHP 중국어 웹사이트의 다른 관련 기사에 주목하세요!

추천 도서:

vue2는 장바구니 주소 선택을 구현합니다

Angular 서버 측 렌더링 방법 요약

위 내용은 ElTableColumn의 내용을 사용자 정의하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!