element UI汉语维语双语显示

汉语维语双语显示

按钮,标签,表格表头等汉语维语双语显示

el-form-item标签双语

javascript 复制代码
<el-form-item label="名称" prop="irrName">
	<el-input v-model="queryParams.irrName" placeholder="请输入名称" clearable
		style="background-color: #f5f5f5;" />
	<div style="margin-top:-15px; margin-left:-70px; font-size: 12px;">修改成对应维语</div>
</el-form-item>

el-button按钮内容双语

javascript 复制代码
<el-button type="primary" size="mini" @click="handleQuery">
	<span>查询</span><br />
	<span style="font-size:12px!important;">修改成对应维语</span>
</el-button>

el-table表头双语及表格样式

表头双语

表头的样式是公用的,无需单独设置

javascript 复制代码
<el-table-column align="center" prop="irrName" >
	<template #header>
		<div class="custom-header">
			<div class="header-line1">名称</div>
			<div class="header-line2">修改成对应的维语</div>
		</div>
	</template>
</el-table-column>

css样式不用设置,公共样式封装好了。

css 复制代码
.custom-header {
  line-height: 1.1; /* 调整行高避免重叠 */
}
.header-line1 {
  font-size: 14px;
  color: rgba(89, 89, 89, 1);
  font-weight: bold;
}
.header-line2 {
  font-size: 12px;
  color: rgba(89, 89, 89, 1);
  font-style: italic;
}

表格样式

表头模板中加入cell-style 、 header-cell-style 、 row-class-name属性

js 复制代码
<el-table v-loading="loading" stripe="stripe" :data="baseList" @selection-change="handleSelectionChange" :cell-style="{ height: '46px', color: '#595959' }" :header-cell-style="{background: '#f2f4fa',fontWeight: '400',fontSize: '16px;',height: '54px',	color: 'rgba(26,26,26,1)'}" :row-class-name="tableRowClassName">

js的methods中加入tableRowClassName 方法

js 复制代码
tableRowClassName ({ row, rowIndex }) {
	if (rowIndex % 2 != 0) {
		return 'warning-row';
	}
	return '';
},

css中加入下面代码必须引入,无法封装

css 复制代码
::v-deep .el-table td.el-table__cell,
::v-deep .el-table th.el-table__cell.is-leaf {
	border: none !important;
}

::v-deep .el-table--border::after,
.el-table--group::after,
.el-table::before {
	background-color: transparent !important;
}

::v-deep .el-table .warning-row {
	background: #f5f5f5;
}
::v-deep .el-table td.el-table__cell div {
	font-size: 14px !important;
	font-weight: 400 !important;
	color: #595959 !important;
	;
}
相关推荐
前端小趴菜054 小时前
React - createPortal
前端·vue.js·react.js
军军君016 小时前
基于Springboot+UniApp+Ai实现模拟面试小工具四:后端项目基础框架搭建下
spring boot·spring·面试·elementui·typescript·uni-app·mybatis
三原7 小时前
7000块帮朋友做了2个小程序加一个后台管理系统,值不值?
前端·vue.js·微信小程序
白仑色7 小时前
完整 Spring Boot + Vue 登录系统
vue.js·spring boot·后端
阳火锅8 小时前
Vue 开发者的外挂工具:配置一个 JSON,自动造出一整套页面!
javascript·vue.js·面试
G_whang9 小时前
jenkins部署前端vue项目使用Docker+Jenkinsfile方式
前端·vue.js·jenkins
荔枝荔枝荔枝9 小时前
【Vue源码学习】Vue新手友好!为什么vue2 this能够直接获取到data和methods中的属性?
vue.js·源码
寻觅~流光9 小时前
封装---统一封装处理页面标题
开发语言·前端·javascript·vue.js·typescript·前端框架·vue
江上暮云10 小时前
手摸手带你彻底搞懂Vue的响应式原理
vue.js
恰薯条的屑海鸥10 小时前
前端进阶之路-从传统前端到VUE-JS(第五期-路由应用)
前端·javascript·vue.js·学习·前端框架