: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
>
<
style
lang
=
"less"
>
.hidden
{
display
:
none
;
.hidden
{
display
:
none
!important
;
.el-row
{
margin-bottom
:
20
px
;
&:
last-child {
margin-bottom
:
0
;
.el-col
{
border-radius
:
4
px
;
.bg-purple-dark
{
background
:
#99a9bf
;
.bg-purple
{
background
:
#d3dce6
;
.bg-purple-light
{
background
:
#e5e9f2
;
.grid-content
{
border-radius
:
4
px
;
min-height
:
36
px
;
.row-bg
{
padding
:
10
px
0
;
background-color
:
#f9fafc
;
</
style
>
注：N20是我们公司自己封装的组件，但是底层还是
element
UI，结构并不是很重要，主要是结构上的:span-method="objectSpanMethod"方法。5）、
表格
里面也有新增和删除功能，删除是删除当前行，新增是新增到当前行的下面，并且前面列动态
合并
，序号也重新排序；4）、勾选复选框，点击复制，复制所选的
数据
到列表最下方，并且序号重新排序；3）、批量删除，勾选复选框点击删除，删除所勾选的
数据
，并且序号重新排序；2）、点击新增，
表格
里面内容新增一行新的
数据
到最下方，并且序号加一；
后台管理系统中的列表页面，一般都会有对列表
数据
进行批量
操作
的功能，例如：批量删除、批量删除等。
之前项目中只是简单的用到
Element
框架中常规的属性、事件。在一次机缘巧合下，了解到一个公司内部的框架是基于
Element
框架内部实现了一些插件功能，对于
表格
这一块完善了很多功能，当时没有把握住机会去看源码是怎么实现的，现在有点小后悔呢，嘤嘤嘤~~~~没关系，自己慢慢一点一点实现。
实现的功能有：
分页
数据
选择
全选所有
数据
（不是
element
框架自带的全选本页哦！）
1、分页
数据
选择
一开始以为不就是分页的时候把之前选中的
数据
存储在一个list里面嘛，然后选择的时候map一下。等到自己
<
el
-
col
:span="6">
<
el
-form-item lab
el
="分包负责人">
<
el
-input v-mod
el
="form.operatorName" disabled></
// 隐藏第一行 的所有列 也就是 orderList[0]
objectSpanMethod ({ rowIndex,
col
umnIndex }) {
if (rowIndex === 0) {
return {
rowspan: 0,
col
sp
el
-row文字换行后实现整行自动撑开
element
-ui 使用
el
-row展示param
数据
时，经常会有返回值文本过长，导致文字换行把单元格撑开，这事如果不设置任何属性，会导致lable单元格和值单元格高度不统一
实现单元格高度自适应需要在
el
-row 设置 type=“flex” 属性就可以了
<
el
-row type="flex">
<
el
-
col
:span="6">姓名：</
el
-
col
>
<
el
-
col
>张三</
el
-
col
&
vue+
element
用于pc后台管理系统比较多,所以后台管理系统一般以处理
数据
为主,
数据
结构的复杂程度变高,相对应的前端展示成本也提高,有些产品经理或许会要求
表格
跨行
或
跨列
合并
,如果你正在想怎么实现,那就接着往下看最新封装了一个
表格
合并
和编辑插件:vue-split-table,戳一戳效果图
element
的2.x
(注意是2.X...
