【ElementPlus】el-table相关的功能实现

1. 表格嵌套表格时，隐藏父表格的全选框

        场景：当table表格设置复选（多选）功能时，如何隐藏表头的复选框，不让用户一键多选。  

<el-table :header-cell-class-name="cellClass">

// 表头复选框禁止点击
function cellClass(row) {
  if (row.columnIndex === 0) {
    // 返回disabledCheck样式，该样式需在style中指定是何效果
    return 'disabledCheck'
  }
}

// 隐藏表头的复选框样式
:deep(.el-table .disabledCheck .cell .el-checkbox__inner) {
  display: none;
}

关于对表格头部的处理：    

• header-cell-style这种方式可以直接ruturn "color: #fff;background:#00bfbf"
•  header-cell-class-name这种只是返回一个class。

2. 判断多选时的点击操作，是选中还是取消

<el-table @select="onSelect">

// 判断时选中还是取消
function onSelect(rows, row) {
  let selected = rows.length && rows.indexOf(row) !== -1
  console.log('selected', selected) // true就是选中，0或者false是取消选中
}

3. 表格有展开项时，动态控制表格的展开图标显示或隐藏

        首先，可以通过为el-table-column设置type="expand"属性来为表格增加展开项。

  <el-table :data="props.tableData">
    <el-table-column type="expand">
      <!-- 展开的子任务 -->
      <template #default="props">
        <el-table :data="props.row.childJobLists"> </el-table>
      </template>
    </el-table-column>
  </el-table>

        若希望动态控制第一列是否显示展开>图标，可以通过动态设置table的样式来实现。

        此处用到row-class-name属性，动态为表格传入类名

<el-table :row-class-name="getRowClassName">

function getRowClassName({ row, rowIndex }) {
  // 根据row的childJobLists属性是否为空数组，判断该行内容是否展开
  if (row.childJobLists.length == 0) {
    return 'row-expand-cover'
  }
}

:deep(.row-expand-cover .el-table__expand-icon) {
  visibility: hidden
}

3. 表格跨页勾选

        重点1：为el-table指定row-key

        重点2：为<el-table-column type="selection"/>设置reserve-selection为true

<el-table
  ref="tableRef"
  :data="tableData"
  :flexible="true"
  v-loading="loading"
  :row-key="getRowKey"
  @selection-change="handleSelectionChange"
>
  <el-table-column width="30" type="selection" fixed :reserve-selection="true"></el-table-column>
</el-table>

// 多选
const handleSelectionChange = list => {
  selectionList.length = 0
  selectionList.push(...list) //存储勾选数据
}
// 保存数据
function getRowKey(row) {
  // 为每行数据绑定唯一标识，注意这里的row.phoneId应该是唯一的
  return row.phoneId
}

4. 树形结构慎用hasChildren 属性

        先来看官网的这段话

        1. tree-props属性用于配置树形结构的数据。

        2. children 属性对应后端的子集属性名，若后端的子集属性名为listChildren，则设置 :tree-props={children: listChildren}；如果不设置tree-props，则默认寻找“children”属性，将其视作子集属性名用于展示子树数据。
        3. 如果子树不是懒加载的数据，不要轻易设置 hasChildren 属性，否则展示会有问题。

5. 表单值清空时爆红的问题

        有时候各表单项相互联动，如表单项A的值发生改变时会导致表单项B的值被清空，若B项本身又存在rules校验，则在这种被动清空的情况下B项会触发校验导致爆红。

        表单本身是支持使用JS手动清除校验的：clearValidate() 。

        注意：触发校验 和 执行clearValidate()的顺序无法控制，所以在vue2中需要把清除校验写在nextTick里，vue3则把清除校验写在setTimeout里。

<el-form ref="formRef" :model="formData" :rules="rules" >
    ...............
</el-form>

let formRef = ref(null) // 表单的ref

// 表单项A的change时间
function change(){

  //......事件本身回调逻辑省略

  setTimeout(() => {
    // 清除表单项imageId、isNewKboxConfig被动引发的校验
    formRef.value.clearValidate(['imageId', 'isNewKboxConfig'])
  })
}