This is my second article on getting started

preface

In the project, meets the checkboxes form data, typically use element – the UI component library, but the default title website content is much marquee style, can be conveniently realize the function of data selection and deselect encapsulation, but, as shown in the project is likely to need a custom title content, don’t want a selection function, and how to implement?

Set type to ‘selection’. This column is a selection column

    <el-table-column
        type="selection"
        width="55">
    </el-table-column>
Copy the code

Change your thinking:

ElementUI adds a class to a row in the Table by specifying the row-class-name attribute of the Table component to change its color and other styles. 1. Hide the default checkbox style by adding the class name. 2. Use pseudo-elements to position the content to the icon position.Copy the code

Without further ado, attached is the change code:

... <el-table-column type="selection" label-class-name="DisabledSelection" width="55"> </el-table-column>...... <style lang="less" scoped> div.main {// Key style changes.el-table /deep/.disabledSelection.cell.el-CheckBox__inner { display: none; position: relative; }.el-table /deep/.disabledselect. cell:before {content: 'select '; position: absolute; right: 20px; } } </style>Copy the code

Here is to change the multi box icon into the “choice” text, we can replace the text style according to the needs of the nuggets the next day, like the words of the trouble to click a like to go, I hope that the partners more support ah, common progress!