Vue使用Element表格Table设置所有单元格内容居中对齐

为单个列的单元格设置居中对齐代码如下:

html 复制代码
        <el-table-column
            prop="productInfo.productName"
            label="中文名"
            width="100"
            align="center"
        >
        </el-table-column>

需要设置el-table-column标签里面的属性设置为align="center"

但是如果有几十个列呢,都需要居中对齐的话 align="center"需要写几十个吗,这样的话代码重复的太多了。

那么如何解决上面的问题呢?

答案是使用table属性cell-style为所有单元格设置一样的 Style。
代码如下:

html 复制代码
<el-table
          :data="tableData"
          :cell-style="cellStyle"
      >
...
js 复制代码
cellStyle({row, column, rowIndex, columnIndex}) {
      return {'text-align': 'center'};
    }

看下效果:

设置之前,所有内容默认是靠左对齐的
设置之后,可以看到所有内容是居中对齐了。

相关推荐
y东施效颦5 分钟前
uni-app页面发布测试环境出现连接服务器超时,点击屏幕重试解决方案
前端·javascript·vue.js·uni-app·vue
大熊程序猿8 分钟前
《开篇:课程目录》
前端·c#
摸鱼仙人~1 小时前
React中子传父组件通信操作指南
前端·javascript·react.js
程序员阿超的博客1 小时前
React事件处理:如何给按钮绑定onClick点击事件?
前端·javascript·react.js
前端小咸鱼一条1 小时前
Vue中渲染函数的使用
javascript·vue.js·ecmascript
沉香亭北1 小时前
vue+vite 全局主题
前端
郑州小张1 小时前
前端解析PDF文件目录以及点击目录实现对应内容预览
前端·javascript
吹牛逼专业户2 小时前
Vue中快速实现主题切换
vue.js
海底火旺2 小时前
探索扣子:解锁中间技能模块的无限可能
前端·人工智能·coze
BigData-02 小时前
vscode vue debug
ide·vue.js·vscode