element表格数据跨行、跨列操作合并显示
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
免费下载资源
·
<template>
<div>
<el-table
:data="tableData6"
border
style="width: 100%; margin-top: 20px" :cellClassName="getCellClassName" :spanMethod="objectSpanMethod" :emptyText="'--'">
<el-table-column :prop="tablekey" :label="tableHeadName" v-for="(tableHeadName, tablekey) in tableHeader" :key="tablekey">
</el-table-column>
<el-table-column
prop="price"
label="价格">
</el-table-column>
</el-table>
<el-row style="margin-top:10px;">
<el-button type="primary">增加一列</el-button>
</el-row>
</div>
</template>
<script>
import _ from 'lodash'
export default {
data () {
return {
tableData6: [],
tableHeader: {'sex': '性别', 'age': '年龄', 'hc': '承载人数'},
priceOption: {
sex: ['男', '女'],
age: [18, 20],
hc: ['2-6人', '7-8人']
},
priceFactor: ['sex', 'age', 'hc']
}
},
created () {
this.tableData6 = this.plzhFirst(this.priceOption)
this.combineCell(this.tableData6)
for (var i = 0; i < this.tableData6.length; i++) {
this.addPrice(this.tableData6[i], '请输入')
}
},
methods: {
addPrice (item, price) {
this.$set(item, 'price', price)
},
getCellClassName ({row, column, rowIndex, columnIndex}) {
if (row['@' + this.priceFactor[columnIndex] + 'dis']) {
return 'hidden'
} else {
return ''
}
},
plzhFirst (datas) {
var array = []
var propObj = this.getFirstProp(datas)
var propName = propObj.name
var propValue = propObj.value
if (_.isArray(propValue)) {
for (var i = 0; i < propValue.length; i++) {
var newObj = {}
newObj[propName] = propValue[i]
array.push(newObj)
}
} else {
let newObj = {}
newObj[propName] = propValue
array.push(newObj)
}
for (let i = 1; i < this.priceFactor.length; i++) {
array = this.plzh(
array,
this.priceOption[this.priceFactor[i]],
this.priceFactor[i]
)
}
return array
},
getFirstProp (obj) {
var propObj = {}
for (var i in obj) {
propObj.name = i
propObj.value = obj[i]
return propObj
}
},
plzh (arr1, arr2, nextAttr) {
var array = []
for (var i = 0; i < arr1.length; i++) {
var obj = arr1[i]
for (var j = 0; j < arr2.length; j++) {
var newObj = _.cloneDeep(obj)
var v2 = arr2[j]
newObj[nextAttr] = v2
array.push(newObj)
}
}
return array
},
colsLogic () {},
objectSpanMethod ({ row, column, rowIndex, columnIndex }) {
if (columnIndex === 3) {
return [1, 1]
}
return [row['@' + this.priceFactor[columnIndex] + 'span'], 1]
},
combineCell (list) {
for (let field in list[0]) {
var k = 0
while (k < list.length) {
list[k]['@' + field + 'span'] = 1
list[k]['@' + field + 'dis'] = false
for (var i = k + 1; i <= list.length - 1; i++) {
if (list[k][field] === list[i][field] && list[k][field] !== '') {
list[k]['@' + field + 'span']++
list[k]['@' + field + 'dis'] = false
list[i]['@' + field + 'span'] = 1
list[i]['@' + field + 'dis'] = true
} else {
break
}
}
k = i
}
}
return list
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less">
.hidden{
display:none;
}
.hidden{
display: none!important;
}
.el-row {
margin-bottom: 20px;
&:last-child {
margin-bottom: 0;
}
}
.el-col {
border-radius: 4px;
}
.bg-purple-dark {
background: #99a9bf;
}
.bg-purple {
background: #d3dce6;
}
.bg-purple-light {
background: #e5e9f2;
}
.grid-content {
border-radius: 4px;
min-height: 36px;
}
.row-bg {
padding: 10px 0;
background-color: #f9fafc;
}
</style>
GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:3 个月前 )
c345bb45
7 个月前
a07f3a59
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update table.md
* Update transition.md
* Update popover.md 7 个月前
更多推荐
已为社区贡献4条内容
所有评论(0)