Table

问题形容本文记录el-table表头合并的多种状况，并提出对应解决方案，预计能帮到局部道友 原生table知识点温习咱们晓得：一个简略的table表格个别由一个或多个tr、th或td标签组成（嵌套）tr标签定义表格行（table-row即为tr）th标签定义表头（table-header即为th）td标签定义表格单元格再简单的表格还包含 caption、col、colgroup、thead、tfoot、tbody等标签，这里暂不延长而合并单元格次要应用的是colspan和rouspan属性，即为可设置横跨列和横跨行的值 而合并单元格次要应用的是colspan和rouspan属性，即为可设置横跨列和横跨行的值 而合并单元格次要应用的是colspan和rouspan属性，即为可设置横跨列和横跨行的值 晓得这两个属性当前，咱们联合一个具体demo来看，就很好的了解了 原生表格demo假如咱们须要做一个周一到周末的表格，记录一下工作内容，如下效果图： 对应代码是这样的： <table border="1"> <tr> <th>工作日</th> <th>工作日</th> <th>工作日</th> <th>工作日</th> <th>工作日</th> <th>周末</th> <th>周末</th> </tr> <tr> <th>周一</th> <th>周二</th> <th>周三</th> <th>周四</th> <th>周五</th> <th>周六</th> <th>周日</th> </tr> <tr> <td>下班</td> <td>下班</td> <td>下班</td> <td>下班</td> <td>下班</td> <td>加班</td> <td>加班</td> </tr></table>然而，咱们想把五个工作日和两个周末进行合并一下，这样看起来更加优雅一些，如下需要 由图示，咱们晓得第一行的工作日一共有5个，咱们先把后4个工作日隐去使其隐没，再让第一个工作日横跨5个单元格宽度，即横跨5列（本来默认都是横跨1列）先隐去后四个工作日单元格 <tr> <th>工作日</th> <th style="display: none;">工作日</th> <th style="display: none;">工作日</th> <th style="display: none;">工作日</th> <th style="display: none;">工作日</th> <th>周末</th> <th>周末</th></tr>变成这样的成果了 这样的话，咱们只须要，再让第一个工作日单元格宽度变宽一些，占据五个单元格，这样的话，宽度有了，就把两个周末挤回到原来失常的地位了那，如何让第一个工作日单元格，占据五个单元格的宽度呢？或者说，如何让一个单元格横跨5列？很简略：<th colspan="5">工作日</th>即可rowspan同理，不赘述需要实现效果图： 对应需要实现代码： <table border="1"> <tr> <th colspan="5">工作日</th> <th style="display: none;">工作日</th> <th style="display: none;">工作日</th> <th style="display: none;">工作日</th> <th style="display: none;">工作日</th> <th colspan="2">周末</th> <th style="display: none;">周末</th> </tr> <tr> <th>周一</th> <th>周二</th> <th>周三</th> <th>周四</th> <th>周五</th> <th>周六</th> <th>周日</th> </tr> <tr> <td>下班</td> <td>下班</td> <td>下班</td> <td>下班</td> <td>下班</td> <td>加班</td> <td>加班</td> </tr></table>所以，通过下面的demo，咱们能够得出一个论断： ...

明天和大家一起学习一个 el-table 分页全选的性能 咱们在用 el-table 组件的时候，必定会用到分页性能，不论是长列表下拉分页还是用 element-UI 的 el-pagination 分页。 然而咱们在具备抉择性能的 el-table 的时候，会遇到一个问题，在点击进行分页之后，之前抉择的数据没了，这个问题真的是困扰我好久。 在前面的我又开始面向百度开发，找到一个没有 bug 的办法这个办法是： 在 el-table 中，通过 @selection-change=“handleRowSelection” 和 :row-key=“getRowKeys”， 在第一行，也就是多选框的那一列上，加上 :reserve-selection="true", 间接上代码，仅供大家参考。 <template> <div> <el-table ref="table" :data="tableData" size="small" height="100%"row-key=“id” @selection-change="handleSelectChange" @select="handleSelect" > <el-table-column width="50" type="selection" /> <el-table-column type="index" label="序号" width="50"> <template scope="scope"> <span>{{ (pageInfo.pageNo - 1) * pageInfo.pageSize + scope.$index + 1 }}</span> </template> </el-table-column> <el-table-column label="名称1" /> <el-table-column label="名称2" /> <el-table-column label="名称3" /> <el-table-column label="名称4" /> <el-table-column label="名称5" /> </el-table> </div></template><script>export default { data() { return { tableData: [], selectedObj: {}, selectedData: [] } }, methods: { getList() { // 查数据的中央，解决分页选中状态 this.handleRowSelection(this.tableData) }, handleSelectChange(selection) { // 全选勾销，删除当前页所有数据 if (selection.length === 0) { this.tableData.forEach(item => { delete this.selectedObj[item.id] }) } // 勾选数据 增加 selection.forEach(item => { this.selectedObj[item.id] = item }) // 获取所有分页勾选的数据 this.selectedData = [] for (const key in this.selectedObj) { this.selectedData.push(this.selectedObj[key]) } }, handleSelect(selection, row) { // 勾销单个勾选时，删除对应属性 if (!selection.some(item => item.id === row.id)) { delete this.selectedObj[row.id] } }, // 解决以后列表选中状态 handleRowSelection(data) { data.forEach(item => { if (this.selectedObj[item.id]) { this.$nextTick(() => { this.$refs.table.toggleRowSelection(item) }) } }) } }}</script>源码附件曾经打包好上传到百度云了，大家自行下载即可～ ...

开发过程中，很多产品经理都喜爱做些花里胡哨的表格展现，以下是一种常见的表格展现形式，看上去如同很简单，实现起来很简略，上面看看代码怎么实现 组件实现次要围绕vxe-talble-v3，这款基于vue的表格框架能节俭很大的功夫 template <template> <vxe-table border height="600" :scroll-y="{ enabled: false }" :span-method="rowspanMethod" :data="tableData" align="center" > <vxe-column field="sort" width="150" title="序号"></vxe-column> <vxe-column field="type" width="250" title="类型" :formatter="formatterType"> </vxe-column> <vxe-colgroup title="验收我的项目" v-if="deepLevel>0"> <vxe-column v-for="(item,idx) in deepLevel" :key="idx" :field="`name${item}`" header-class-name="header"></vxe-column> </vxe-colgroup> <vxe-column field="content" type="html" width="350" title="设计规范要求及标准规定"> <template #default="{ row }"> <div class="cellContent" v-if="XEUtils.isArray(row.content)"> <p @click="cellLink(item)" v-for="(item,idx) in row.content" :key="idx"><i class="el-icon-paperclip icon"></i><span class="link">{{item.provisions_info}}</span></p> </div> <span v-else>{{row.content}}</span> </template> </vxe-column> </vxe-table></template>js import XEUtils from "xe-utils";export default { data() { return { tableData: [], acceptance_item: [], deepLevel:0, XEUtils:XEUtils }; }, created() { setTimeout(() => { // 获取api数据 this.acceptance_item = this.getData(); this.acceptance_item.forEach((item,idx)=>{ item.sort = idx+1+'' }) let that = this; // 遍历api树形构造层数，标记最深层 function arrLevel(arr,lv){ if(!arr || !arr.length) return; arr.forEach(item=>{ that.deepLevel = lv>that.deepLevel?lv:that.deepLevel; if(item.children && item.children.length){ arrLevel(item.children,lv+1) } }) } // 标记最深层赋值，vxetable在渲染进来 arrLevel(this.acceptance_item,1) console.log(this.deepLevel) this.toColTreeData(this.acceptance_item) }, 2000); }, methods: { // 将一般树结构转换为横向树列表 toColTreeData(treeData) { const options = { children: "children" }; const list = []; const keyMap = {}; XEUtils.eachTree( treeData, (item, index, result, paths, parent) => { item, index, result, paths, parent; keyMap[item.uid] = item; item.keys = parent ? parent.keys.concat([item.uid]) : [item.uid]; if (!item.children || !item.children.length) { const row = {}; item.keys.forEach((key, index) => { const level = index + 1; const obj = keyMap[key]; row[`id${level}`] = obj.uid; // 第1层赋值序号和类型 if(level==1){ row.sort = obj.sort row.type = obj.type } // content外面层会笼罩里面层 let content = obj.content?obj.content:obj.provisions row.content = content; // name遍历整个构造的所有name row[`name${level}`] = obj.name }); list.push(row); } }, options ); this.keyMap = keyMap; console.log(list) this.tableData = list }, formatterType ({ cellValue }) { return cellValue==1?"主控我的项目": cellValue == 2? "个别我的项目":"" }, cellLink(e){ debugger }, // 通用行合并函数（将雷同多列数据合并为一行） rowspanMethod({ row, _rowIndex, column,_columnIndex, visibleData }) { let that = this; let arr = [] for(let i=0;i<this.deepLevel;i++){ arr.push(`name${i+1}`) } const fields =[...arr,...["type","sort"]]; const cellValue = row[column.property]; if (cellValue && fields.includes(column.property)) { const prevRow = visibleData[_rowIndex - 1]; let nextRow = visibleData[_rowIndex + 1]; if (prevRow && prevRow[column.property] === cellValue) { return { rowspan: 0, colspan: 0 }; } else { let countRowspan = 1; while (nextRow && nextRow[column.property] === cellValue) { nextRow = visibleData[++countRowspan + _rowIndex]; } if (countRowspan > 1) { return { rowspan: countRowspan, colspan: 1 }; } } } // 用point标记name+'n' let point = '' Object.keys(row).forEach(item=>{ if(item.indexOf('name')>-1 && item != `name${that.deepLevel}`){ point = item; } }) // point 与 column.property 相等时，操作以后单元格横移拉伸 if(point == column.property && !row[`name${that.deepLevel}`]){ return { rowspan: 1, colspan: this.deepLevel - ( parseInt(point.split('name')[1]) - 1 ) } } // 将undefined的单元格暗藏 if(cellValue==undefined){ return { rowspan: 0, colspan: 0 } } }, getData(){ const data = [{ id: 10, uid: "317218091849220096", puid: "0", type: 1, name: "1", content: "钢筋", provisions: [ { provisions_id: "", provisions_info: "", specification_id: "", }, ], children: [ { id: 9, uid: "317218091849220097", puid: "317218091849220096", type: 0, name: "1.1", content: "", provisions: [ { provisions_id: "1", provisions_info: "钢筋", specification_id: "1", }, { provisions_id: "2", provisions_info: "混凝土", specification_id: "1", }, ], children: [], }, { id: 9, uid: "317218091849220200", puid: "317218091849220096", type: 0, name: "1.2", content: "", provisions: [ { provisions_id: "3", provisions_info: "钢筋1", specification_id: "1", }, { provisions_id: "4", provisions_info: "混凝土1", specification_id: "1", }, ], children: [], }, { id: 10, uid: "317218091849220201", puid: "317218091849220096", type: 0, name: "1.3", content: "", provisions: [ { provisions_id: "5", provisions_info: "钢筋2", specification_id: "1", }, { provisions_id: "6", provisions_info: "混凝土2", specification_id: "1", }, ], children: [ // { // id: 11, // uid: "317218091849220202", // puid: "317218091849220201", // type: 0, // name: "1.3.1", // content: "个别323", // provisions: [ // { // provisions_id: "", // provisions_info: "", // specification_id: "", // }, // ], // children: [], // }, ], }, ], }, { id: 13, uid: "317218091849220098", puid: "0", type: 2, name: "2", content: "", provisions: [ { provisions_id: "", provisions_info: "", specification_id: "", }, ], children: [ { id: 12, uid: "317218091849220099", puid: "317218091849220098", type: 0, name: "2.1", content: "", provisions: [ { provisions_id: "", provisions_info: "", specification_id: "", }, ], children: [ { id: 11, uid: "317218091849220100", puid: "317218091849220099", type: 0, name: "2.1.1", content: "个别", provisions: [ { provisions_id: "", provisions_info: "", specification_id: "", }, ], children: [], }, { id: 11, uid: "317218091849220101", puid: "317218091849220099", type: 0, name: "2.1.2", content: "个别", provisions: [ { provisions_id: "", provisions_info: "", specification_id: "", }, ], children: [], }, ], }, ], }] return data } },};scss ...

概述事件产生在半个月前，过后正在开发一个Table组件。Table的body应用div作为单元格渲染进去的，header局部应用原生table标签渲染的，后果宽度适应的时候，header 和body 总是无奈同步对齐，有几个像素的误差。最初发现了是浏览器渲染table相干元素的时候，不反对小数渲染。 剖析起因先写个demo <div class="stage"> <table class="table"> <tr> <td>Content</td> </tr> </table></div><style>* { padding: 0; margin: 0;}.stage { width: 100.5px; height: 100px; background-color: red;}.table { width: 100.5px; background-color: blue;}</style>chrome浏览器成果如下： 其实只有是浮点数，间接都会被截断，所以设置 100px的成果和设置100.1px、100.5px、100.9px都是一样的。 这就真的不能忍了，间接求助网络，发现相干材料非常少，官网也没有相干阐明，查到不少起因，比方： 浏览器最小渲染单位。这个显著很没有说服力，尽管浏览器确认存在最小渲染单位，然而无法解释 div 能渲染出浮点数，而table不行。stackoverflow有议论这个根本原因到底是什么，我也没彻底搞懂。不过，无论什么起因，必须先得拿出一套解决方案，工期不能误呀！ 解决方案本人推敲了一个兼容计划，过后也是眉头一皱;计上心来，想到了一个解决形式。 想法非常简单，就是单元格宽度先向下取整，平均分配，这样理论累计的宽度 必定比 现实的小一点，而后把差进去的再依照索引进行调配，这样尽管有的单元格宽了1px，然而不影响视觉效果。 想到这个计划之后，发现这个解决形式和之前解决的如何保障 一组数据百分比之和为100%是一样的。 /** * @param {*} baseWidth 冀望宽度 * @param {*} cols 列数 * @returns 每列宽度的汇合 */function adjustWidth(baseWidth, cols) { const cellWidth = Math.floor(baseWidth / cols); // 计算基准单元格width const offset = baseWidth - cellWidth * cols; // 偏差值 const results = new Array(cols).fill(cellWidth); // 如果有冗余，再次调配 for (let i = 0; i < offset; i++) { results[i] = cellWidth + 1; } return results;}adjustWidth(1000, 3); // [ 334, 333, 333 ]

一、antd-vue官网给出的空数据的参数也给出了例子，emptyText: '暂无数据'。如果你只须要改文案，依照这个形式即可。 但在理论场景中，咱们不仅须要自定义文案，更心愿有其余更多的自定义内容，比方缺省图二、更多个性化设置官网文档给的太过简洁，其实 emptyText 不仅能够传文字，也能够传组件！也就是说你能够自定义一个缺省的组件，依然通过 emptyText 传进去就行 看上面的例子：1、失常封装一个Empty组件（款式本人依据须要调整） 2、table 组件 的 locale 参数传入 组件引入： 值得说的是，Empty在引入之后，是不须要在components中注册的！来看一下比照成果，默认的： 自定义的： list 组件也是同样的办法。有了这个办法当前，怎么自定义都能够啦~

前言在开发后盾管理系统中，表格是常常用到的数据展现形式。然而，有时候表格展现的列过多，会呈现一屏展现不下，须要手动滚动滚动条查看的状况。 其实，在零碎理论应用的过程中，不同用户关注的列不同，并不是肯定要展现所有的列。因而，能够开发一个可能配置表格须要展现的列的性能，这样只展现关注的列，不关注的列就无需在页面上展现，进步用户的应用体验。 需要要求能够动静配置表格中须要展现的列，默认展现所有列。 思路将列数据定义在data中，而后动静绑定列数据到模板上提供一组用于设置列展现的复选框，默认选中所有列，即默认展现所有列选中或勾销选中某个列时，更新模板中动静绑定的列数据，实现页面只显示须要展现的列开发状态首先依据思路，能够确定几个状态： tableData 表格数据tableColumns 表格所有列数据，列数据的惟一起源bindTableColumns 绑定到模板上的列数据，即须要展现的列数据checkedTableColumns 复选框中选中的列数据实现而后开始实现： 首先，写一个根底的表格。（参考element-ui根底表格） <template> <el-table :data="tableData"> <el-table-column prop="date" label="日期"> </el-table-column> <el-table-column prop="name" label="姓名"> </el-table-column> <el-table-column prop="address" label="地址"> </el-table-column> </el-table></template><script>export default { data() { return { tableData: [ { date: "2016-05-02", name: "王小虎", address: "上海市普陀区金沙江路 1518 弄", }, { date: "2016-05-04", name: "王小虎", address: "上海市普陀区金沙江路 1517 弄", }, { date: "2016-05-01", name: "王小虎", address: "上海市普陀区金沙江路 1519 弄", } ], }; },};</script>而后，优化模板。 将表格的列数据tableColumns定义在data中，在模板中通过v-for指令遍历列数据。 <template> <el-table :data="tableData"> <el-table-column v-for="column in tableColumns" :key="column.prop" :prop="column.prop" :label="column.label" > </el-table-column> </el-table></template><script>export default { data() { return { tableColumns: [ { prop: "date", label: "日期", }, { prop: "name", label: "姓名", }, { prop: "address", label: "地址", }, ], }; },};</script>其次，优化列数据tableColumns，给每一个column增加show属性，用于示意列的显示与暗藏。默认为true，即默认展现所有列。 ...