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;
	;
}
相关推荐
前端工作日常6 分钟前
前端基建的幸存者偏差
前端·vue.js·前端框架
cypking3 小时前
解决electron+vue-router在history模式下打包后首页空白问题
javascript·vue.js·electron
Watermelo6173 小时前
极致的灵活度满足工程美学:用Vue Flow绘制一个完美流程图
前端·javascript·vue.js·数据挖掘·数据分析·流程图·数据可视化
Watermelo6173 小时前
Web Worker:让前端飞起来的隐形引擎
前端·javascript·vue.js·数据挖掘·数据分析·node.js·es6
VillenK3 小时前
vban2.0中table的使用—action封装
前端·vue.js
VillenK4 小时前
vban2.0中table的使用
前端·vue.js
Dolphin_海豚4 小时前
vapor 中的 ast 是如何被 transform 到 IR 的
前端·vue.js·源码
袋鱼不重5 小时前
Vue3 Effect源码解析
前端·javascript·vue.js
拾光拾趣录5 小时前
Vue 双向数据绑定原理
前端·vue.js
90后的晨仔5 小时前
vue中的watch 可以监听对象吗?
前端·vue.js