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

相关文章

利用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

使用Python实现表格字段智能去重

《使用Python实现表格字段智能去重》在数据分析和处理过程中,数据清洗是一个至关重要的步骤,其中字段去重是一个常见且关键的任务,下面我们看看如何使用Python进行表格字段智能去重吧... 目录一、引言二、数据重复问题的常见场景与影响三、python在数据清洗中的优势四、基于Python的表格字段智能去重

Gin框架中的GET和POST表单处理的实现

《Gin框架中的GET和POST表单处理的实现》Gin框架提供了简单而强大的机制来处理GET和POST表单提交的数据,通过c.Query、c.PostForm、c.Bind和c.Request.For... 目录一、GET表单处理二、POST表单处理1. 使用c.PostForm获取表单字段:2. 绑定到结

javaScript在表单提交时获取表单数据的示例代码

《javaScript在表单提交时获取表单数据的示例代码》本文介绍了五种在JavaScript中获取表单数据的方法:使用FormData对象、手动提取表单数据、使用querySelector获取单个字... 方法 1:使用 FormData 对象FormData 是一个方便的内置对象,用于获取表单中的键值

如何利用Python实现给Excel表格截图

《如何利用Python实现给Excel表格截图》这篇文章主要为大家详细介绍了如何利用Python实现给Excel表格截图功能,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 我搜索了网络上的方案,感觉把 Excel 表格转换为 html 再用 platwright 截图是比China编程较顺

vue基于ElementUI动态设置表格高度的3种方法

《vue基于ElementUI动态设置表格高度的3种方法》ElementUI+vue动态设置表格高度的几种方法,抛砖引玉,还有其它方法动态设置表格高度,大家可以开动脑筋... 方法一、css + js的形式这个方法需要在表格外层设置一个div,原理是将表格的高度设置成外层div的高度,所以外层的div需要