vue中的横向排列_vue + ElementUI 的横向表格代码

{{tableData[index*2-1] !== undefined ? tableData[index*2-1].key : ‘‘}}

{{tableData[index*2-1] !== undefined ? tableData[index*2-1].value : ‘‘}}

商品序号

{{tableData[index-1].key}}22

{{tableData[rowCount+index-1] !== undefined ? tableData[rowCount+index-1].key : ‘‘}}

{{tableData[rowCount+index-1] !== undefined ? tableData[rowCount+index-1].value : ‘‘}}

var Main = {

data() {

return {

styleObject: {},

s_showByRow: true,

tableData: [

{key: ‘单号‘, value: ‘1001‘,index: ‘1‘,},

{key: ‘商品名称‘, value: ‘篮球‘,index: ‘1‘},

{key: ‘价格‘, value: ‘120.00‘, index: ‘1‘},

{key: ‘订单日期‘, value: ‘2017-03-01‘, index: ‘1‘},

{key: ‘付款方式‘, value: ‘在线支付‘, index: ‘1‘},

{key: ‘收货地址‘, value: ‘北京市海淀区西北旺镇‘, index: ‘1‘},

};

//props: [‘tableData‘, ‘tableStyle‘, ‘showByRow‘],

computed: {

rowCount: function() {

return Math.ceil(this.tableData.length/2);

}

created() {

this.styleObject = this.tableStyle;

if(this.showByRow !== undefined){

this.s_showByRow = this.showByRow;

}

var Ctor = Vue.extend(Main)

new Ctor().$mount(‘#app‘)

.mailTable, .mailTable tr, .mailTable tr td{ border:1px solid #E6EAEE; }

.mailTable{ font-size: 12px; color: #71787E; }

.mailTable tr td{ border:1px solid #E6EAEE; width: 150px; height: 35px; line-height: 35px; box-sizing: border-box; padding: 0 10px; }

.mailTable tr td.column { background-color: #EFF3F6; color: #393C3E; }

原文：https://www.cnblogs.com/lhqdbk/p/12206477.html

vue中的横向排列_vue + ElementUI 的横向表格代码相关推荐

Vue中使用纯CSS样式设计Table横向竖向滚动自定义个别列固定
在Vue中CSS样式来设计Table横向竖向滚动自定义个别列表头固定前言一.表格数据二.样式设计 1.表格与外层DIV样式 2.固定表头的样式(重要) 总结前言大家一定使用过很多UI,UI都 ...
vue 中provide的用法_vue中的provide和inject
阅读element-ui源码,发现在设计子组时件用到了inject属性,随即查了一下官方文档,得知vue在2.2.0版本里新增了provide / inject: provide 和 inject 主 ...
vue中的浏览量_vue中前进刷新、后退缓存用户浏览数据和浏览位置的实践
从列表页 ------> 详情页, 再从详情页 -----> 列表页 ,要保存上次已经加载的数据和自动还原上次的浏览位置 1. 缓存组件,vue2中提供了keep-alive.首先在我们的 ...
vue中create 什么触发_vue中eventbus被多次触发（vue中使用eventbus踩过的坑）
一开始的需求是这样子的,我为了实现两个页面组件之间的数据传递,假设我有页面A,点击页面A上的某一个按钮之后,页面会自动跳转到页面B,同时我希望将页面A上的某一些参数携带过去给页面B.(我知道,小参数的 ...
vue 中的el表达式_Vue中vue.filter()的使用方法介绍（过滤）
本篇文章给大家带来的内容是关于Vue中vue.filter()的使用方法介绍(过滤),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. Vue过滤器 {{msg |msgFormat}} ...
vue中this.init用法_Vue中的this.$options.data()和this.$data用法说明
问题项目里遇到一个问题,用this.$options.data()重置组件data时,data()里用this获取的props或method都为undefined,代码简化如下: export de ...
vue中表头 th 合并单元格，且表格列数不定的动态渲染方法
吐槽今天,在vue中遇到复杂表格的渲染 ,需要合并表头th的单元格,且合并单元格的那列的表头数据是动态数据,也就是不知道会有多少个表头列,而这几个表头列还分了好几个子表头.vue-split-ta ...
vue中的横向排列_vue横向步骤条
v-bind:class="[stepArray.length==2 ? 'width-2' : stepArray.length==3?'width-3':'width-4', '']&q ...
vue 中provide的用法_vue中provide和inject使用
1.provide/inject有什么用? 常用的父子组件通信方式都是父组件绑定要传递给子组件的数据,子组件通过props属性接收,一旦组件层级变多时,采用这种方式一级一级传递值非常麻烦,而且代码可读 ...
vue 表单验证正则_vue elementui form表单验证的实现
最近我们公司将前端框架由easyui 改为 vue+elementui .自学vue两周就开始了爬坑之路.业余时间给大家分享一下心得,技术新手加上第一次分享(小激动),有什么不足的地方欢迎大家指正, ...

vue中的横向排列_vue + ElementUI 的横向表格代码

vue中的横向排列_vue + ElementUI 的横向表格代码相关推荐

最新文章

热门文章