表格表头自定义el-checkbox,全选单选

  • table数据添加勾选属性itemCheck,默认为false
  • 表头添加render函数,渲染el-checkbox,绑定chang事件
  • 在change事件中处理table数据,给itemCheck重新赋值,改变行勾选状态
  • 改变行勾选状态,处理表头全选、部分选中、取消全选状态

处理table数据

for (let val of data) {
       val.itemCheck = false;
 this.dataList = data || [];

template结构

<el-table :data="dataList"
                  border
                  align="center"
                  style="width: 100%;">
          <el-table-column :resizable="false"
                           min-width="30px"
                           :render-header="renderHeader"
                           align="center">
            <template slot-scope="scope">
              <el-checkbox v-model="scope.row.itemCheck"
                @change="toggleCheck(scope.row)"></el-checkbox>
            </template>
          </el-table-column>
          <el-table-column label="编号"
                           type="index"
                           :resizable="false"
                           min-width="30px"
                           align="center">
          </el-table-column>
          <el-table-column prop="parkName"
                           label="停车场名称"
                           :resizable="false"
                           align="center">
          </el-table-column>
          <el-table-column label="泊位号"
							prop="berthCode"
                           :resizable="false"
                           align="center">
          </el-table-column>
          <el-table-column label="车牌号"
                           :resizable="false"
                           align="center">
            <template slot-scope="scope">
              <div class="plateColor">
                <plateColor v-if="scope.row.plateNumber"
                            :plateCarNum="scope.row.plateNumber"
                            :plateColorNum="scope.row.plateColor" />
            </template>
          </el-table-column>
          <el-table-column label="入场时间"
														prop="entryTime"
                           :resizable="false"
                           align="center">
          </el-table-column>
          <el-table-column label="停车时长"
                            prop="parkIngDuration"
                           align="center"
                           :resizable="false">
          </el-table-column>
          <el-table-column prop="entryDataSourceName"
                           label="入场数据来源"
                           align="center"
                           :resizable="false">
          </el-table-column>
          <el-table-column label="操作"
                           align="center"
                           :resizable="false">
            <template slot-scope="scope">
              <el-button type="text"
                         @click="getDataDetail(scope.$index)"
                         v-if="scope.row.exitTime ? true : false">
              </el-button>
              <el-button type="text"
                         @click="getDataDetail(scope.$index)"
                         v-if="scope.row.exitTime ? false : true">
              </el-button>
            </template>
          </el-table-column>
        </el-table>

表头renderheader

renderHeader(h, data) {
      return h("span", [
        h("el-checkbox", {
          on: {
            change: this.selectBox
          props: {
            value: this.isCheck,
            indeterminate: this.indeterminate

表头change方法,改变table数据

selectBox() {
      this.isCheck = !this.isCheck;
      console.log(this.isCheck);
      let list = [...this.dataList];
      for (let val of list) {
        val.itemCheck = this.isCheck;
      this.dataList = list;

单行勾选状态,处理表头勾选状态

toggleCheck(row) {
// 获取已勾选
      let list = this.dataList.filter(item => item.itemCheck);
      this.isCheck = list.length === this.dataList.length
      this.indeterminate = list.length > 0 && list.length < this.dataList.length;
      console.log(this.indeterminate, row.itemCheck);
// el-table 上是 @select事件
  handleSelectionChange (selecteds, row) {
      // 回显数据里没有本条,把这条加进去(选中)
      if (!this.selection.includes(row.Id)) {
        this.selection.push(row.Id)
      } else {
        // 回显数据中有本条,把这条删除(取消选中)
        this.selection.for
                                    以上就可以实现树状表格选择父节点子节点全选,子节点不全选父节点半选,但是对于handleSelectionChange,里面处理数据还是很懵的,虽然解决了,但是感觉不是最优的方法,如果有好的解决方法,可以分享下,欢迎分享和指正。这个里面还是比较混乱的,打印出来三次,这个我是可以理解的,因为勾选了三个,但是打印的这个顺序,我不太懂,由于有个勾选之后,操作批量下载和批量取消,不勾选的时候,是禁止点击批量下载和批量取消的。于是我就对上面的代码进行了改进。
    <template slot="header" slot-scope="scope">
      <el-tooltip effect="dark" content="若销售提成按“百分比”,则根据“活动价”来计算" placement="top"&......
<el-checkbox-group v-model="status">
    <el-checkbox  false-label='null' :true-label="1" name="status">启用</el-checkbox>
    <el-checkbox  false-label='null' :true-label="2" name="status"&
                                    <el-checkbox-group v-model="form.checkState">
    <el-checkbox  false-label='null' true-label="true" name="state">启用</el-checkbox>
    <el-checkbox  false-label='null' true-label=...
                                    需求: 用 el-checkboc 实现单选功能并且当选中某一项时则回填到input框里,当点击 enter 键或者是 按下搜索图标按键,来实现页面搜索内容的同步展示;
                                    vue +el-checkbox多选框实现单选
1.表格加一列
<el-table-column type="selection" align="center" width="100" />
2.隐藏掉全选按钮
/deep/ thead .el-table-column--selection .cell{
    display: none;
3.给表格加一个 ref,例如:ref="Table" (加在el-table的属性里)
给表格加一个事件 @selection="getCurr
给el-table标签添加ref=“tables”属性,第一列复选框标签上添加reserve-selection属性
2、定义一个方法,将后端返给我们的list数据传参
这里的this.returnDatas是一个数组,里面是已有的两条数据的id
将已有的两条数据的id和后端返回的列表的每一行id去做对比,如果这一行
<template>
  <!-- `checked` 为 true 或 false -->
  <el-checkbox v-model="checked">备选项</el-checkbox>
</template>
<script>
  export default {
    data() {
      return {
        checke
                                    关于el-table的展开 选择 expand 选项
 <el-dialog title="权限列表" :visible.sync="formVisible1">
                    <div><br></div>
                    <el-button @click="send()" type="primary">发送</el-button>