Vue+Element组件el-table添加表头全选文字

html部分：<el-table v-if="showTable"class="inter_table":data="apiList.slice((currentPage-1)*pagesize,currentPage*pagesize)"tooltip-effect="dark"style="width: 100% !important;"

天山小黎

3706人浏览 · 2020-12-30 09:52:56

天山小黎 · 2020-12-30 09:52:56 发布

html部分：

      <el-table v-if="showTable"
                class="inter_table"
                :data="apiList.slice((currentPage-1)*pagesize,currentPage*pagesize)"
                tooltip-effect="dark"
                style="width: 100% !important;"
                border
                @selection-change="handleSelectionChange">
        <el-table-column
            　　label-class-name="DisabledSelection"
            　　width="70px"
            　　type="selection"
            　　header-align="center"
            　　align="center">
        </el-table-column>
      </el-table>

css部分

	/*表格表头全选*/
	.el-table /deep/.DisabledSelection .cell .el-checkbox__inner{
	  margin-left: -30px;
	  position:relative;
	}
	.el-table /deep/.DisabledSelection .cell:before{
	  content:"全选";
	  position:absolute;
	  right:11px;
	}

展示效果
在这里插入图片描述

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^