elementui 表格表头竖着显示_Vue+Element自定义纵向表格表头教程
如下所示:
代码如下:
{{ item.key }} | {{ item.value }} |
绑定的是 statDatas 属性是一个 json数组,由key value组成的json,如果需要多列就直接增加属性就可以。
优美样式:
.myTable {
border-collapse: collapse;
margin: 0 auto;
text-align: center;
}
.myTable td,
.myTable th {
border: 1px solid #cad9ea;
color: #666;
height: 60px;
}
补充知识:vue element table表头垂直表格(新增封装一个垂直表格的组件)
对话框中弹出查看信息,打开时表格,要求是表头在左侧
日报类型 | {{editForm.daily_type | filterType}} |
开始时间 | {{editForm.start_time | formatTimer('hours')}} |
结束时间 | {{editForm.end_time | formatTimer('hours') }} |
今日内容 | {{editForm.content}} |
计划 | {{editForm.plan}} |
效果
------------------手动的华丽丽的的分割线------------------
最近封装了一个带插槽的垂直表头的table组件
效果如图
封装的部分全部代码
:value="1"
class="item"
type="primary"
v-if="item.label === '扣分项' || item.label === '加分项'" //这里是动态传表头进去
/>
{{ item.label }}
{{ item.text }}
export default {
name: "table-detail",
props: {
detailData: {
type: Array,
default: () => []
}
},
data() {
return {
visible: false
}
}
}
.table_detail {
width: auto;
height: auto;
margin: 0 10px 0 10px;
border: 1px solid #ebeef5;
border-bottom: none;
.list {
display: flex;
justify-content: space-between;
border-bottom: 1px solid #ebeef5;
// font-size: 16px;
.label {
width: 95px;
border-right: 1px solid #ebeef5;
padding: 10px 10px 10px 0;
text-align: right;
font-weight: 400;
}
.text {
flex: 1;
text-align: left;
padding: 10px 30px 10px 10px;
font-weight: 500;
word-wrap: break-word; //超出文本行自动换行
word-break: break-all; //超出文本行自动换行
overflow: hidden; //超出文本行自动换行
}
}
}
然后使用部分,先局内引入注册
然后使用
// 这部分使我们自己要用的预览文件的部分,不用的话可以不用写
:upload="new Upload(upload)"
is-download
is-preview
is-view
disabled
/>
{{ file.url }}
type="primary"
:href="file ? file.url : ''"
target="_blank"
>预览
>
下载
在data 里面定义 companyDetail: [],
然后在methods里面获取到数据之后赋值即可
this.companyDetail = [
{
label: `${this.labelTitle}项`,
text: res.indexTitle
},
{
label: `${this.labelTitle}值`,
text: res.score
},
{
label: `${this.labelTitle}时间`,
text: this.$formatDate(res.reportTime, "YYYY.MM.DD", "YYYYMMDD")
},
{
label: `${this.labelTitle}单位`,
text: res.orgName
},
{
label: `${this.labelTitle}原因`,
text: res.description
},
{
label: "申诉理由",
text: res.reason
},
{
label: "附件",
prop: "file",
text: files
}
]
大致如上。
以上这篇Vue+Element自定义纵向表格表头教程就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。
elementui 表格表头竖着显示_Vue+Element自定义纵向表格表头教程相关推荐
- Vue+Element自定义纵向表格表头
代码如下: <table style="width: 100%" class="myTable"><tr v-for="(item, ...
- elementui 表格表头竖着显示_element ui 表格表头纵向显示
element ui 提供了table ,根据对象数组 动态展示表格,但是实际需求中,有很多竖向展示表格的需求 效果图: 原本数据 data: [ { code: "weixin" ...
- elementui 表格表头竖着显示_ElementUI中table表格自定义表头Tooltip文字提示
picture table-header-tips 应用 element 中的 table 组件,自定义表头 Tooltip 文字提示. 效果图 效果图 示例 demo 代码 引用 element-u ...
- elementui 表格表头竖着显示_elementUI Table表格表头自定义
element UI 官方文档有一个 :render-header 的方法 渲染自定义结构用的是 vue 的h函数 也就是render 函数写法 //html align="center&q ...
- element手机验证格式_vue封装 element-ui form表单验证 正则匹配手机号 自定义校验表格内容...
效果 image.png 在methods中 //检查手机号 isCellPhone(val) { if (!/^1(3|4|5|6|7|8)\d{9}$/.test(val)) { return f ...
- element表格实现树形全选_vue+element UI实现树形表格带复选框的示例代码
一:在component文件夹下新建如下treeTable文件夹,里面有2个文件: eval.js:将数据转换成树形数据 /** * @Author: jianglei * @Date: 2017-1 ...
- html中表格实现在页面居中显示,html中怎么把表格居中
html中把表格居中的方法:首先创建一个HTML示例文件:然后使用table标签创建一个两行两列的表格:接着给table标签添加一个class属性:最后将margin属性设置为"0 auto ...
- word中表格标题设置重复显示时不成功且表格自动换页问题
在一篇文档中,表格跨行,需要设置重复标题行,有两种方法 第一种:选中标题行,选择表格属性-行-在各页顶端以标题行形式重复出现: 第二种:选择标题行-布局-重复标题行 但有时会碰到,使用其中任意一种方法 ...
- excel如何使单元格里的文字竖着显示
为了一些特殊的效果,需要用到文字竖着显示,那么如何在Excel里面怎样让单元格里的文字竖着显示? 1,新建表格,输入示例文字,如图所示. 2,选中单元格点击上方工具栏"选项",然后 ...
最新文章
- (Alex note) Create a oracle database
- VC++实现恢复SSDT
- Apache Kafka-生产者_批量发送消息的核心参数及功能实现
- 美团产品顾问马占凯:关于育儿,你需要知道的一切
- 安卓开发环境之 Android Studio
- eclipse中修改内存
- Google真相:决策贡献及其艰苦抉择
- VirtualBox 安装 Ubuntu 14.10 花屏 解决方案
- centos6.5 安装python3.5
- sql \n 查询_探索SQL查询提示选项(快速N)
- Scratch(四十八):植物大战僵尸
- 2021-2027全球与中国电子束加速器市场现状及未来发展趋势
- SREng扫描报告分析
- python条形图一直长_Python MatPlotlib条形图调整宽度
- 国外香港云计算服务器评测,UCLOUD云计算活动及体验香港云主机综合评测记录
- 浅谈虚拟机的垃圾回收
- python自制免费代理IP服务
- Android的RemoteViews
- FME大规模转换OSM PBF数据
- 算法的时间复杂度、空间复杂度、稳定性