How to customize the content of ElTableColumn

This time I will show you how to customize the content of ElTableColumn, and what are the precautions for customizing the content of ElTableColumn. 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

to avoid typing comments....

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the PHP Chinese website !

Recommended reading:

vue2 implements shopping cart address selection

Angular server-side rendering method summary

The above is the detailed content of How to customize the content of ElTableColumn. For more information, please follow other related articles on the PHP Chinese website!