element ui表格头部和表单的小红星*

2024-01-10 04:40

本文主要是介绍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表格头部和表单的小红星*的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/589580

相关文章

在.NET平台使用C#为PDF添加各种类型的表单域的方法

《在.NET平台使用C#为PDF添加各种类型的表单域的方法》在日常办公系统开发中,涉及PDF处理相关的开发时,生成可填写的PDF表单是一种常见需求,与静态PDF不同,带有**表单域的文档支持用户直接在... 目录引言使用 PdfTextBoxField 添加文本输入域使用 PdfComboBoxField

使用Java将各种数据写入Excel表格的操作示例

《使用Java将各种数据写入Excel表格的操作示例》在数据处理与管理领域,Excel凭借其强大的功能和广泛的应用,成为了数据存储与展示的重要工具,在Java开发过程中,常常需要将不同类型的数据,本文... 目录前言安装免费Java库1. 写入文本、或数值到 Excel单元格2. 写入数组到 Excel表格

python获取网页表格的多种方法汇总

《python获取网页表格的多种方法汇总》我们在网页上看到很多的表格,如果要获取里面的数据或者转化成其他格式,就需要将表格获取下来并进行整理,在Python中,获取网页表格的方法有多种,下面就跟随小编... 目录1. 使用Pandas的read_html2. 使用BeautifulSoup和pandas3.

HTML5表格语法格式详解

《HTML5表格语法格式详解》在HTML语法中,表格主要通过table、tr和td3个标签构成,本文通过实例代码讲解HTML5表格语法格式,感兴趣的朋友一起看看吧... 目录一、表格1.表格语法格式2.表格属性 3.例子二、不规则表格1.跨行2.跨列3.例子一、表格在html语法中,表格主要通过< tab

C#实现将Excel表格转换为图片(JPG/ PNG)

《C#实现将Excel表格转换为图片(JPG/PNG)》Excel表格可能会因为不同设备或字体缺失等问题,导致格式错乱或数据显示异常,转换为图片后,能确保数据的排版等保持一致,下面我们看看如何使用C... 目录通过C# 转换Excel工作表到图片通过C# 转换指定单元格区域到图片知识扩展C# 将 Excel

利用Python开发Markdown表格结构转换为Excel工具

《利用Python开发Markdown表格结构转换为Excel工具》在数据管理和文档编写过程中,我们经常使用Markdown来记录表格数据,但它没有Excel使用方便,所以本文将使用Python编写一... 目录1.完整代码2. 项目概述3. 代码解析3.1 依赖库3.2 GUI 设计3.3 解析 Mark

Python实现自动化表单填写功能

《Python实现自动化表单填写功能》在Python中,自动化表单填写可以通过多种库和工具实现,本文将详细介绍常用的自动化表单处理工具,并对它们进行横向比较,可根据需求选择合适的工具,感兴趣的小伙伴跟... 目录1. Selenium简介适用场景示例代码优点缺点2. Playwright简介适用场景示例代码

Java利用poi实现word表格转excel

《Java利用poi实现word表格转excel》这篇文章主要为大家详细介绍了Java如何利用poi实现word表格转excel,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 一、每行对象类需要针对不同的表格进行对应的创建。package org.example.wordToEx

最新Spring Security实战教程之表单登录定制到处理逻辑的深度改造(最新推荐)

《最新SpringSecurity实战教程之表单登录定制到处理逻辑的深度改造(最新推荐)》本章节介绍了如何通过SpringSecurity实现从配置自定义登录页面、表单登录处理逻辑的配置,并简单模拟... 目录前言改造准备开始登录页改造自定义用户名密码登陆成功失败跳转问题自定义登出前后端分离适配方案结语前言

使用EasyExcel实现简单的Excel表格解析操作

《使用EasyExcel实现简单的Excel表格解析操作》:本文主要介绍如何使用EasyExcel完成简单的表格解析操作,同时实现了大量数据情况下数据的分次批量入库,并记录每条数据入库的状态,感兴... 目录前言固定模板及表数据格式的解析实现Excel模板内容对应的实体类实现AnalysisEventLis