el-table自定义表头header的样式

267 阅读1分钟
<el-table-column prop="plateNumber" align="center">
  <template #header>
    <span>
      <span style="color: red;">*</span>
      <span>运输工具号</span>
    </span>
  </template>
  <template slot-scope="scope">
    <el-form-item
      :prop="'vehicleInfo.' + scope.$index + '.plateNumber'"
      :rules="{ required: true, trigger: ['blur', 'change'], message: '请选择运输工具号' }"
    >
      <el-select v-model="scope.row.plateNumber" @change="(val) => handlePlateNumberChange(val, scope.row)">
        <el-option v-for="item of form.vehicleList" :key="item.plateNumber" :label="item.plateNumber" :value="item.plateNumber"></el-option>
      </el-select>
    </el-form-item>
  </template>
</el-table-column>

使用插槽,可以用插槽的内容替换表头 同样的,el-form-item的label也可以使用插槽来自定义

<el-form-item>
  <template #label>
    <div style="text-align: center; width: 100%;">
      <span style="color: red; font-size: 14px;margin-right:4px">*</span>
      <span>常开车辆:</span>
    </div>
  </template>
</el-form-item>