el-table增加多选框并在表头增加全选字样

html-css07

el-table增加多选框并在表头增加全选字样,第1张

实现方法：

1.手动添加一个el-table-column，设type属性为selection即可

<el-table-column type="selection" width="100px"></el-table-column>

2.在el-table-column中设置label属性并不会起作用，因此全选二字需要使用CSS来实现

.el-table__header .el-table-column--selection .cell .el-checkbox:after {

color: #333

content: "全选"

font-size: 16px

margin-left: 12px

font-weight: bold

}

这个样式实测有效！

简单的代码实现，仅供参考：

单选框：

<body>    <input type="radio" name="sex" value="n" />    <input type="radio" name="sex" value="v" /></body>

复选框：

<body>    <input type="checkbox" value="n" />    <input type="checkbox" value="v" /></body>

下拉框：

<body>    <select>        <option>n</option>        <option>n</option>        <option>n</option>    </select></body>

扩展资料：

css注意事项

1、每个标签的属性设置必须是被一对花括号包含。像下面的样子：

标签

{

属性名称：属性值

}

2、花括号中每个属性值赋值后必须用分号隔开。分号就相当于C#和C中的分号，指示一行语句的结束，加上分号就是和网页的解释器说明这个属性的赋值已经结束了，下面开始一个新的属性的赋值。正确的格式是下面的样子：

标签

{

属性名称1：属性值

属性名称2：属性值

属性名称3：属性值

}

3、关于颜色值。我们在前面的文章中，在设置style时，不论是color属性还是background-color属性，赋值时都是指定的颜色名称。这种方式在网页编程中比较不通用。比较常用的做法是赋16进制值，类似于#RRGGBB这种样式，每一位的取值都是从1到F，每两位对应一类颜色值。具体的颜色值可以在网上搜到。

4、关于字体。我们在style中的font-family中设置字体。有时候我们设置的字体可能用户电脑中没有，这时候我们可以在font-family中设置多个可选字体，用逗号分隔，这样如果前面的字体用户电脑中没有，则可以使用后面的字体进行替换。下面是个例子：

<p sytle="font-family:serif,Cursive,Fantasy">

参考资料来源：百度百科：CSS