美文网首页Vue.jsVue.js专区前端Vue专辑
VUE 对element-ui中的ElTableColumn扩展

VUE 对element-ui中的ElTableColumn扩展

作者: 素笺淡墨染流年 | 来源:发表于2018-03-15 17:53 被阅读102次

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

    ElTableColumn本来是这个样子的:

    elemnet table.png

    要做成的是这个样子:

    gif.gif

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

    代码的结构:

    代码结构.png

    组件

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

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

    相关文章

      网友评论

      • c4c7b2509e93:如果那个select是一个可以多选的呢,会不会出现每次点击都出现多个弹窗,有试过?

      本文标题:VUE 对element-ui中的ElTableColumn扩展

      本文链接:https://www.haomeiwen.com/subject/ihwhqftx.html