Vue3:elementplus表格header-cell-class-name回调方法使用

简介: Vue3:elementplus表格header-cell-class-name回调方法使用

我们在一个系统中如果要使用多个表格,那就得统一表格的样式,比如表头表示或者表格单元格的样式,如果对每一个有表格的vue文件都设置样式未免太麻烦,所以我们可以使用elementplus表格中自带的属性

1eb9f64fbf0646c297768563c1dadfee.png通过这些回调方法去统一设置样式

单个表格


这里我们以header-cell-class-name为例子进行举例

单一页面的使用过程如下:

①在表格中绑定header-cell-class-name属性

<el-table :data="tata" 
:header-cell-class-name="随便取的名字" >

②在js中定义回调函数

const 随便取的名字 = ({ row, column, rowIndex, columnIndex }) => {
    //返回css中写好的样式
    return 'css中写好的样式'
}

③在css中写好的样式

.css中写好的样式{
  width:100px;
  }

多个表格

多个表格是指在不同的页面都有表格

我们可以在把公共的样式封装在一个js文件中,然后在需要使用的页面中导入

这里我们以header-cell-style为例子进行举例

使用object的方式

// 在tableCommon.js文件
export const 随便取的名字 = {
    width:100px;
    background:pink;
}
// 在需要的页面
import { 随便取的名字 } from 'js文件的路径'
// 然后在el-table的标签中 绑定:header-cell-style='随便取的名字'

这样导入的每个页面都有这个css样式了

目录
打赏
0
0
0
0
9
分享
相关文章
高效工作流:用Mermaid绘制你的专属流程图;如何在Vue3中导入mermaid绘制流程图
mermaid是一款非常优秀的基于 JavaScript 的图表绘制工具,可渲染 Markdown 启发的文本定义以动态创建和修改图表。非常适合新手学习或者做一些弱交互且自定义要求不高的图表 除了流程图以外,mermaid还支持序列图、类图、状态图、实体关系图等图表可供探索。 博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
你真的会使用Vue3的onMounted钩子函数吗?Vue3中onMounted的用法详解
onMounted作为vue3中最常用的钩子函数之一,能够灵活、随心应手的使用是每个Vue开发者的必修课,同时根据其不同写法的特性,来选择最合适最有利于维护的写法。博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
Pinia 如何在 Vue 3 项目中进行安装和配置?
Pinia 如何在 Vue 3 项目中进行安装和配置?
管理数据必备;侦听器watch用法详解,vue2与vue3中watch的变化与差异
一篇文章同时搞定Vue2和Vue3的侦听器,是不是很棒?不要忘了Vue3中多了一个可选项watchEffect噢。 博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
除了provide/inject,Vue3中还有哪些方式可以避免v-model的循环引用?
需要注意的是,在实际开发中,应根据具体的项目需求和组件结构来选择合适的方式来避免`v-model`的循环引用。同时,要综合考虑代码的可读性、可维护性和性能等因素,以确保系统的稳定和高效运行。
136 56
创建vue3项目步骤以及安装第三方插件步骤【保姆级教程】
这是一篇关于创建Vue项目的详细指南,涵盖从环境搭建到项目部署的全过程。
291 1
vue3使用pinia中的actions,需要调用接口的话
通过上述步骤,您可以在Vue 3中使用Pinia和actions来管理状态并调用API接口。Pinia的简洁设计使得状态管理和异步操作更加直观和易于维护。无论是安装配置、创建Store还是在组件中使用Store,都能轻松实现高效的状态管理和数据处理。
177 3
|
3月前
|
vue使用iconfont图标
vue使用iconfont图标
168 1
Vue Router 核心原理
Vue Router 是 Vue.js 的官方路由管理器,用于实现单页面应用(SPA)的路由功能。其核心原理包括路由配置、监听浏览器事件和组件渲染等。通过定义路径与组件的映射关系,Vue Router 将用户访问的路径与对应的组件关联,支持哈希和历史模式监听 URL 变化,确保页面导航时正确渲染组件。

热门文章

最新文章

AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等