vue3 表头显示小图标

发布时间 2023-09-11 13:41:42作者: flyComeOn
     <!-- 排班信息 -->
      <el-table  
        v-resize:44 
        :data="tableData" 
        class="table"
        border 
        style='margin: 10px 0px'
        highlight-current-row 
        element-loading-text="数据正在加载中..."
        header-cell-class-name="table-header"
        :header-cell-style="{'text-align':'center'}"
        :cell-style="cellStyle"
        :cell-class-name="tableCellClass"
        @cell-click="cellClick"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" align="center"/>
        <el-table-column  type="index" label="NO."  width='55px'/>
        <el-table-column prop="lineName" width='100px' label="线路名称"  />
        <el-table-column prop="vehicleSet" width='230px' label="车组人员" >
          <template #header >
            <span>车组人员</span>
            <el-tooltip class="item" effect="light" placement="top-start" content="点击该列中的单元格可调整车组人员信息">
              <el-icon style="margin-left:2px;"><QuestionFilled /></el-icon> 
            </el-tooltip>
          </template>
        </el-table-column>
      
        <el-table-column label="操作" width="120px"  align="center">
          <template #default="scope">
            <el-button  type="primary" title="车组调整" icon="Stamp" circle plain  @click="handleCar(scope.row)" />
            <el-button  type="success" title="任务调整" icon="Edit" circle plain @click="handleTask(scope.row)" />
          </template>
        </el-table-column>
      </el-table>