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

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

ElTableColumn本来是这个样子的：

要做成的是这个样子：

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

代码的结构：

组件

安装

使用

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

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

ajax 返回值自动添加pre标签的解决方法

ajax使用不同namespace的action的方法

用ajax实现预览链接可以看到链接的内容

以上就是详解VUE 对element-ui中的ElTableColumn扩展的详细内容，更多请关注Gxl网其它相关文章！