: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 : 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...