element带选择表格将表头的复选框改成文字的实现代码

首先，我们需要明确一个概念：element-ui是一个基于Vue.js框架的组件库，提供了一系列UI组件和工具，包括表格(Table)组件和复选框(Checkbox)组件。

要实现将表头的复选框改成文字，可以通过自定义表头的插槽(slot)来实现。具体的步骤如下：

1. 在template标签中定义表格(Table)组件，并设置表头(Headers)和数据(Data)，其中Headers中的Checkbox要替换为文字。

<template>
  <el-table :data="tableData">
    <el-table-column label="编号" prop="id"></el-table-column>
    <el-table-column label="名称" prop="name"></el-table-column>
    <<el-table-column>
      <template slot="header">
        <span>工作</span>
      </template>
      <template slot-scope="scope">
        <el-checkbox v-model="scope.row.checked"></el-checkbox> {{ scope.row.work }}
      </template>
    </el-table-column>
  </el-table>
</template>

1. 在script标签中向data中添加tableData，数据格式如下：

data() {
  return {
    tableData: [
      {
        id: 1,
        name: '张三',
        checked: false,
        work: '设计'
      },
      {
        id: 2,
        name: '李四',
        checked: true,
        work: '开发'
      }
    ]
  }
}

1. 在style或者在外部css文件中添加样式，将Checkbox的样式隐藏，将文字居中显示。

.el-checkbox {
  display: none;
}
.el-checkbox + span {
  display: inline-block;
  padding-left: 20px;
}

示例1：
假设我们要在表头中添加“选择全部”，并且点击“选择全部”可以同时选中或取消所有复选框，在实现“选择全部”的基础上，将表头的复选框改成文字“是否选择”。

<template>
  <el-table :data="tableData">
    <el-table-column type="selection"></el-table-column>
    <el-table-column label="编号" prop="id"></el-table-column>
    <el-table-column label="名称" prop="name"></el-table-column>
    <el-table-column>
      <template slot="header">
        <span>是否选择全部</span>
      </template>
      <template slot-scope="scope">
        <el-checkbox v-model="scope.row.checked"></el-checkbox> 是否选择
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          id: 1,
          name: '张三',
          checked: false
        },
        {
          id: 2,
          name: '李四',
          checked: true
        }
      ]
    }
  }
}
</script>

<style>
.el-checkbox {
  display: none;
}
.el-checkbox + span {
  display: inline-block;
  padding-left: 20px;
}
</style>

示例2：
在表头中添加两个文字："是否选择"和"工作类型"，并且“工作类型”列的数据由Select组件选择。

<template>
  <el-table :data="tableData">
    <el-table-column type="selection"></el-table-column>
    <el-table-column label="编号" prop="id"></el-table-column>
    <el-table-column label="名称" prop="name"></el-table-column>
    <el-table-column>
      <template slot="header">
        <span>是否选择</span>
      </template>
      <template slot-scope="scope">
        <el-checkbox v-model="scope.row.checked"></el-checkbox> 是否选择
      </template>
    </el-table-column>
    <el-table-column>
      <template slot="header">
        <span>工作类型</span>
      </template>
      <template slot-scope="scope">
        <el-select v-model="scope.row.job" placeholder="请选择">
          <el-option label="设计" value="desiger"></el-option>
          <el-option label="开发" value="developer"></el-option>
          <el-option label="测试" value="testor"></el-option>
        </el-select>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          id: 1,
          name: '张三',
          checked: false,
          job: ''
        },
        {
          id: 2,
          name: '李四',
          checked: true,
          job: ''
        }
      ]
    }
  }
}
</script>

<style>
.el-checkbox {
  display: none;
}
.el-checkbox + span {
  display: inline-block;
  padding-left: 20px;
}
</style>

以上是Element带选择表格将表头的复选框改成文字的实现代码攻略的完整步骤和样例。