自定义列头样式

基础用法

属性	值	说明
:headerData	{slot: "operate"}	预留插槽位置，用于渲染自定义列头

html中对需要自定义的插槽内容进行渲染：通过“<template #header>”标签指定对列头进行操作。

html示例：

<yui-table
    :rowData="rowData.filter(data => !search || data.userId.toLowerCase().includes(search.toLowerCase()))"
    :headerData="headerData数据对象"
    :controlAtrr="controlAtrr数据对象"
>
</yui-table>
<template #operate>
    <el-table-column
    slot="operate"
    label="操作"
    align="center"
    width="300"
    >
    <template #header>
      <el-input
        v-model="search"
        size="mini"
        placeholder="输入关键字搜索"/>
    </template>
    </el-table-column>
 </template>

vue.js示例

<script lang="ts">
  data() {
      return {
          // 表头搜索关键字
          search: '',
       }
  }

</script>

效果