Detailed explanation of VUE's extension of ElTableColumn in element-ui

This article mainly introduces the detailed explanation of VUE's ElTableColumn extension in element-ui. Now I share it with you and give it as a reference.

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’ll just put the code directly, it’s 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;

Install

import ElTableColumnPro from 'components/ElTableColumnPro/index' ... ... ... Vue.use(ElTableColumnPro)

Use