设置Table列必填项的红色*号

1、循环创建table

          <el-table :data="searchFrom.detailsList" border style="width:100%;" highlight-current-row max-height="300">
            <el-table-column type="index" :index="indexMethod" label="序号" width="50" />

            <el-table-column v-for="(item,index) in columnData" :key="index" :prop="item.prop" :render-header="item.need ? renderHeader : null" :label="item.label" min-width="120" show-overflow-tooltip>
              <template slot-scope="scope">
                <el-form-item v-if="scope.column.property==='componentState'" :prop="'detailsList.'+scope.$index+'.'+scope.column.property" :rules="detailTableRules[scope.column.property]" :show-message="false" class="table-cell-item">
                  <el-select
                    v-model="scope.row[scope.column.property]"
                    placeholder="请选择"
                    :disabled="allDisabled"
                    clearable
                  >
                    <el-option
                      v-for="options in compontArray"
                      :key="options.id"
                      :label="options.label"
                      :value="options.value"
                    />
                  </el-select>
                </el-form-item>

                <el-form-item v-else :prop="'detailsList.'+scope.$index+'.'+scope.column.property" :rules="detailTableRules[scope.column.property]" :show-message="false" class="table-cell-item">
                  <el-input v-model="scope.row[scope.column.property]" style="width:100%" :disabled="allDisabled" placeholder="请输入" />
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column
              label="操作"
              align="center"
              width="80px"
              fit
              fixed="right"
            >
              <template slot-scope="scope">
                <el-button size="mini" type="danger" :disabled="allDisabled" @click="handleDelete(scope.$index)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>

2、renderHeader设置列的样式

 // 设置必填项的红色*号
    renderHeader(cerateElement, { column }) {
      return cerateElement('div', [
        cerateElement('span', {
          domProps: {
            innerHTML: '*'
          },
          style: {
            color: 'red',
            fontSize: '16px',
            marginRight: '5px'
          }
        }),
        cerateElement('span', column.label)
      ])
    },