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;
	;
}
相关推荐
ui设计前端开发老司机28 分钟前
数字孪生技术为UI前端提供全面支持:实现产品的可视化配置与定制
ui
菌菇汤1 小时前
uni-app实现单选,多选也能搜索,勾选,选择,回显
前端·javascript·vue.js·微信小程序·uni-app·app
qq_411671981 小时前
vue3 的模板引用ref和$parent
前端·javascript·vue.js
X_StarX2 小时前
【Unity笔记01】基于单例模式的简单UI框架
笔记·ui·unity·单例模式·游戏引擎·游戏开发·大学生
清幽竹客3 小时前
vue-37(模拟依赖项进行隔离测试)
前端·vue.js
vvilkim3 小时前
Nuxt.js 页面与布局系统深度解析:构建高效 Vue 应用的关键
前端·javascript·vue.js
paopaokaka_luck3 小时前
基于SpringBoot+Vue的电影售票系统(协同过滤算法)
vue.js·spring boot·后端
滿3 小时前
Vue3 父子组件表单滚动到校验错误的位置实现方法
前端·javascript·vue.js
要加油哦~8 小时前
vue | 插件 | 移动文件的插件 —— move-file-cli 插件 的安装与使用
前端·javascript·vue.js
小林学习编程8 小时前
Springboot + vue + uni-app小程序web端全套家具商场
前端·vue.js·spring boot