el-table用法总结

表格主要学习链接：

https://element-plus.gitee.io/zh-CN/component/table.html#table-%E6%96%B9%E6%B3%95

主要用法：

表格插槽、单选、多选、固定头和列

主要用法：

1.固定表头
也就是表格超过显示页面的高度时要出现滚动条，一般要设置表头不能滚动。

 height 属性  例子height="250"

2.动态高度
一般用次方式设置固定表头一步到位

 height="calc(100vh - 180px )"

3.固定列
当表格字段很多时或出现横向滚动条，一般操作栏要固定。
想要固定的列，添加fixed属性（可以设置左右固定）

  例如： fixed="right"

4.设置首行样式

   :header-cell-style="{
      background: '#eef1f6',
      color: '#606266',
      'text-align': 'center'
    }"

5.处理表格多选或全选

      <el-table
	    :data="tableData"
	    @selection-change="handleSelectionChange"
	  >
	      <el-table-column
	          type="selection"
	          label="全选"
	      >
	        </el-table-column>
	  </el-table>

6.表格插槽
（1）操作栏插槽
@子组件：

    <el-table-column label="操作" :align="'center'" fixed="right">
      <template #header> <el-input v-model="search"  /></template> // 自定义表头
      <template #default="scope">
        <slot name="action" :scope="scope"></slot>
      </template>
    </el-table-column>

@父组件

         <template #action="scope">
	        <el-button
	          @click="handleDelete(scope.scope.row)"
	          >删除</el-button
	        >
	     </template>

（2）默认插槽

       <el-table-column label="创建时间" prop="createTime" :align="'center'">
	      <template #default="scope">
	        {{ dayjs(scope.row.createTime).format("YYYY-MM-DD HH:mm:ss") }}
	      </template>
	    </el-table-column>

7.多级表头
数据结构比较复杂的时候，可使用多级表头来展现数据的层次关系。
只需要将el-table-column 放置于el-table-column 中，你可以实现组头。

8.单选

 <el-table
    :data="tableData"
    ref="singleTableRef"
    highlight-current-row   //点击选中颜色高亮
    @current-change="handleCurrentChange"  //执行某个动作。
 ></el-table>

清理选中的值： singleTableRef.value.setCurrentRow()
9.排序
前端一般处理单页的排序，分页的后台处理。加sortable 即可

<el-table-column prop="date" label="Date" sortable width="180" />

10.展开行

 <el-table-column type="expand"><template #default="props"></template></el-table-column>

表格事件：

clearSelection 用于多选表格，清空用户的选择 —
getSelectionRows 返回当前选中的行
toggleRowSelection 用于多选表格，切换某一行的选中状态，如果使用了第二个参数，则可直接设置这一行选中与否 row, selected
toggleAllSelection 用于多选表格，切换全选和全不选 —
toggleRowExpansion 用于可扩展的表格或树表格，如果某行被扩展，则切换。使用第二个参数，您可以直接设置该行应该被扩展或折叠。 row, expanded
setCurrentRow 用于单选表格，设定某一行为选中行，如果调用时不加参数，则会取消目前高亮行的选中状态。 row
clearSort 用于清空排序条件，数据会恢复成未排序的状态 —
clearFilter 传入由columnKey 组成的数组以清除指定列的过滤条件。如果没有参数，清除所有过滤器 columnKeys
doLayout 对 Table 进行重新布局。当表格可见性变化时，您可能需要调用此方法以获得正确的布局 —
sort 手动排序表格。参数 prop 属性指定排序列，order 指定排序顺序。 prop: string, order: string
scrollTo 滚动到一组特定坐标 (options: ScrollToOptions | number, yCoord?: number)
setScrollTop 设置垂直滚动位置 top
setScrollLeft 设置水平滚动位置 left

表格图片预览：

<el-table-column label="Thumbnail" width="180">
    <template #default="scope">
        <div style="display: flex; align-items: center">
            <el-image :preview-src-list="srcList"/>
        </div>
    </template>
</el-table-column>

注：由于固定列是通过 sticky 来实现的，如果表格中含有固定列，请在图像上添加 preview-teleported 属性