本文主要是介绍element ui表格头部和表单的小红星*,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
表格头部小红星
在表格模板中写:render-header="renderHeader"
<el-table-column label="纯度" :render-header="renderHeader" >
在方法中写
renderHeader (h, { column, $index }){let currentLabel = column.label;return h('span',{},[h('span',{class: 'headerIcon'},'*'),h('span',{},currentLabel)])},
样式中颜色变红
::v-deep .headerIcon {color: red;vertical-align: middle;}
--------------------------------------------------------------------------------------
还有一种方法:
在表格<el-table>标签中加:header-cell-class-name="start",相当于加一个类名,method中写方法,
columnIndex是表格列的下标
start({row,rowIndex,column,columnIndex}){if(columnIndex==7||columnIndex==10||columnIndex==9){return 'start'}},
在样式中写颜色
::v-deep {.el-table table tr th.start div:before {content: '*';color:red;}
}
表单动态小红星
<el-form-item label-width="90px" label="理由" prop="remarks" v-if="formData.exStatus !== 1"><span slot="label"><span v-if="formData.exStatus !== '1'" style="color: #ff4949">*</span>理由:</span><el-inputv-model="formData.remarks"type="textarea"placeholder="请输入理由":autosize="{ minRows: 2, maxRows: 4 }"maxlength="200"show-word-limit></el-input>
</el-form-item>
-------------------------------------------------------------------------------------------------------------------------
还有一种快速的方法,表单<el-form-item>标签内加 required
<el-form-item required label="申请准入期限" ><el-date-pickertype="daterange"v-model="item.applyTimeList"format="yyyy-MM-dd"value-format="yyyy-MM-dd"class="pickerStyle":picker-options="pickerOptions"start-placeholder="开始日期"end-placeholder="结束日期"range-separator="至"clearable></el-date-picker></el-form-item>
这篇关于element ui表格头部和表单的小红星*的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!