element表格数据跨行、跨列操作合并显示_el-col 跨行

link之家

链接快照平台

输入网页链接，自动生成快照
标签化管理网页链接

相关文章推荐

潇洒的电梯 · Qt 学习之路 2（60）：使用 DOM ...· 1 月前 ·

没有腹肌的核桃 · 国产开源大模型： ...· 1 年前 ·

气宇轩昂的春卷 · SVG中插入HTML标签_svg界面嵌套ht ...· 1 年前 ·

想出国的饼干 · QT设计器。移动和调整部件的大小，同时尊重窗 ...· 2 年前 ·

行走的冲锋衣 · 数据库架构之【MinIO+Nginx+Kee ...· 2 年前 ·

心软的刺猬 · MySQL :: MySQL 8.0 ...· 2 年前 ·

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