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

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

ElTableColumn本来是这个样子的：

要做成的是这个样子：

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

代码的结构：

组件

rush:js;"> import ElTableColumnPro from './ElTableColumnPro' ElTableColumnPro.install = function(Vue) { Vue.component(ElTableColumnPro.name,ElTableColumnPro); }; export default ElTableColumnPro;

安装

rush:js;"> import ElTableColumnPro from 'components/ElTableColumnPro/index' ... ... ...

Vue.use(ElTableColumnPro)

使用

rush:xhtml;"> 代码 " :width="120" placeholder="请输入客户代码" :callback="requestTransactionLogs" renderType="input" :param.sync="request_params.clientCode"> aram.sync="request_params.event" :width="100">

rush:xhtml;"> 代码 " align="center" header-align="center" placeholder="请输入客户代码" :callback="getLists" renderType="input" :param.sync="params.clientCode"> 内容 " placeholder="请输入内容" :callback="getLists" renderType="input" :param.sync="params.content"> aram.sync="params.userName">

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。