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