开发指南029-el-table-column对齐属性

简介: 按开发文档和正常理解,el-table-column具有属性align,可以填left,center,right控制内容的对齐方式

按开发文档和正常理解,el-table-column具有属性align,可以填left,center,right控制内容的对齐方式。你真正做的时候,就会发现根本不起作用。

      查网络,大部分怀疑你用错属性了,elment-ui版本不对,css冲突等等。

      还有这样的解决方案:el-table增加 :cell-style=“{ textAlign:‘left’}” 问题是需要控制在列上,有限列要居中,例如名字。有的要右对齐,例如数字字段。

     还有这样的,对对应的列增加:el-table_1_column_4  .cell {

                   text-align: left !important;

      }

     其实都没有回答在点子上。网上大部分解决方案其实都是有问题的。

    正确的原因是el-table-column在使用<template>后会套了层<div>导致设置不生效。知道了原因,解决起来很容易:

    增加:

/deep/ .is-left > div {

   text-align: left;

}

/deep/ .is-right > div {

   text-align: right;

}

即可

目录
打赏
0
6
7
1
153
分享
相关文章
隐藏el-table-column过多的内容并进行浮窗展示
隐藏el-table-column过多的内容并进行浮窗展示
隐藏el-table-column过多的内容并进行浮窗展示
Vue表格显示问题:v-show无法影响el-table-column列的解决方案
Vue表格显示问题:v-show无法影响el-table-column列的解决方案
1262 0
element-UI el-table动态显示隐藏列造成固定一侧的列(fixed=“left/right“)错误显示
问题原因:多个tabs共用一个实体,动态显示隐藏列 出现了固定在右侧的列(fixed="right")错位 【解决方案】 表格的重新布局,只要table数据发生变化的时候就重新渲染表格 ```js this.$nextTick(() => { this.$refs.formname.doLayout() }) ``` 参考element官方文档 ![请在此添加图片描述](https://developer-private-1258344699.cos.ap-guangzhou.myqcloud.com/column/article/5877188/20231030-e40
372 0
element-UI el-table动态显示隐藏列造成固定一侧的列(fixed=“left/right“)错误显示
ElementPlus的el-table-column如何添加超链接的代码
ElementPlus的el-table-column如何添加超链接的代码
element el-table固定列凹陷问题
element el-table固定列凹陷问题
186 0
el-table表格还可以这么玩
我们都知道表格是横向渲染的,一行一行去展示。不过博主这里有个需求是纵向渲染,一列一列去展示,下面是全部代码,分享出来或许能帮到你们
324 1
el-table表格还可以这么玩
使用Render 自定义列的表格组件——Table
使用Render 自定义列的表格组件——Table
730 1
AI助理

你好,我是AI助理

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