Detailed explanation of ElTableColumn extension method

This time I will bring you a detailed explanation of the ElTableColumn extension method. What are theprecautionsfor the ElTableColumn extension? The following is a practical case, let's take a look.

The company has a new requirement. Click on the head of ElTableColumn to search. My colleagues have already made this function, but it is a bit inconvenient to use. I plan to encapsulate it into a component and learn about it.

ElTableColumn originally looked like this:

What it wants to do is like this:

I will put the code directly, it is too much to explain one after another.

Structure of the code:

Components

    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