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

相关文章

element-ui下拉输入框+resetFields无法回显的问题解决

《element-ui下拉输入框+resetFields无法回显的问题解决》本文主要介绍了在使用ElementUI的下拉输入框时,点击重置按钮后输入框无法回显数据的问题,具有一定的参考价值,感兴趣的... 目录描述原因问题重现解决方案方法一方法二总结描述第一次进入页面,不做任何操作,点击重置按钮,再进行下

HarmonyOS学习(七)——UI(五)常用布局总结

自适应布局 1.1、线性布局(LinearLayout) 通过线性容器Row和Column实现线性布局。Column容器内的子组件按照垂直方向排列,Row组件中的子组件按照水平方向排列。 属性说明space通过space参数设置主轴上子组件的间距,达到各子组件在排列上的等间距效果alignItems设置子组件在交叉轴上的对齐方式,且在各类尺寸屏幕上表现一致,其中交叉轴为垂直时,取值为Vert

HTML提交表单给python

python 代码 from flask import Flask, request, render_template, redirect, url_forapp = Flask(__name__)@app.route('/')def form():# 渲染表单页面return render_template('./index.html')@app.route('/submit_form',

Prompt - 将图片的表格转换成Markdown

Prompt - 将图片的表格转换成Markdown 0. 引言1. 提示词2. 原始版本 0. 引言 最近尝试将图片中的表格转换成Markdown格式,需要不断条件和优化提示词。记录一下调整好的提示词,以后在继续优化迭代。 1. 提示词 英文版本: You are an AI assistant tasked with extracting the content of

form表单提交编码的问题

浏览器在form提交后,会生成一个HTTP的头部信息"content-type",标准规定其形式为Content-type: application/x-www-form-urlencoded; charset=UTF-8        那么我们如果需要修改编码,不使用默认的,那么可以如下这样操作修改编码,来满足需求: hmtl代码:   <meta http-equiv="Conte

js异步提交form表单的解决方案

1.定义异步提交表单的方法 (通用方法) /*** 异步提交form表单* @param options {form:form表单元素,success:执行成功后处理函数}* <span style="color:#ff0000;"><strong>@注意 后台接收参数要解码否则中文会导致乱码 如:URLDecoder.decode(param,"UTF-8")</strong></span>

前端form表单+ifarme方式实现大文件下载

// main.jsimport Vue from 'vue';import App from './App.vue';import { downloadTokenFile } from '@/path/to/your/function'; // 替换为您的函数路径// 将 downloadTokenFile 添加到 Vue 原型上Vue.prototype.$downloadTokenF

vue2实践:el-table实现由用户自己控制行数的动态表格

需求 项目中需要提供一个动态表单,如图: 当我点击添加时,便添加一行;点击右边的删除时,便删除这一行。 至少要有一行数据,但是没有上限。 思路 这种每一行的数据固定,但是不定行数的,很容易想到使用el-table来实现,它可以循环读取:data所绑定的数组,来生成行数据,不同的是: 1、table里面的每一个cell,需要放置一个input来支持用户编辑。 2、最后一列放置两个b

Golang GUI入门——andlabs ui

官方不提供gui标准库,只好寻求第三方库。 https://github.com/google/gxui 这个gui库是谷歌内部人员提供的,并不是谷歌官方出品,现在停止维护,只好作罢。 第三方gui库 找了好多,也比较了好多,最终决定使用的是还是 https://github.com/andlabs/ui 相信golang gui还会发展的更好,期待更优秀的gui库 由于andlabs

关于使用cspreadsheet读写EXCEL表格数据的问题

前几天项目有读写EXCEL表格的需求,我就找了大概有几种,大致分为:COM方法、ODBC方法、OLE方法、纯底层格式分析方法。由于COM方法要求必须安装有OFFICE的EXCEL组件,纯底层格式分析方法又很多功能需要自行去完善,所有最终选择了数据库的方法,用数据库的方法去存取xls格式的数据。网上有一个高手写的CSpreedSheet,看了一下提供的接口,感觉挺好用的。在使用的过程中发现几个