文章目录

• 树状表格
• • 需求样式
  • 应用场景
• 实现需求
• • 简单实现
  • • 引入方法
    • 页面代码
    • 实现效果
  • 优化
  • • 层级显现
    • • 代码
      • 实现效果
    • 单元格文字对齐
• 总结

树状表格

需求样式

应用场景

树状表格究竟能在项目里面用在哪些地方呢？
最显著的特点就是数据有层级结构，所有才使用树形的。说直白一点就是 有子级和父级这种上下级关系

如本次的案例数据为银行，还有管理系统的系统菜单也是这种

实现需求

知道了需求就该考虑实现了

简单实现

引入方法

utils/index.js目录文件里面的方法

/*** 判断数据是否为 null、undefined、""* data:验证数据* **/
export function isNull(data) {return (data === null || data === '' || data === undefined);
}/*** 树形数据转换* @param {*} data* @param {*} id* @param {*} pid*/
export function treeDataTranslate (data, id = 'id', pid = 'parentId') {var res = []var temp = {}for (var i = 0; i < data.length; i++) {temp[data[i][id]] = data[i]}for (var k = 0; k < data.length; k++) {if (temp[data[k][pid]] && data[k][id] !== data[k][pid]) {if (!temp[data[k][pid]]['children']) {temp[data[k][pid]]['children'] = []}if (!temp[data[k][pid]]['_level']) {temp[data[k][pid]]['_level'] = 1}data[k]['_level'] = temp[data[k][pid]]._level + 1temp[data[k][pid]]['children'].push(data[k])} else {res.push(data[k])}}return res
}

页面代码

实现效果

跟需求相比，还需要对齐

优化

层级显现

代码

更改上面的columnStyle方法

// 更改单元格样式
columnStyle({ row, column, rowIndex, columnIndex }) {if(column.property === "name") {return {height: "45px",// 'padding': '0px','text-align': 'left',"padding-left": '50px',};}else {return {height: "45px",'padding': '0px','text-align': 'center',};}},

实现效果

其实这个效果还是有问题，就是同一级别的单元格文字没有对齐，如果需要更加的细致的优化可以看下面的代码

单元格文字对齐

总结

本文主要介绍了树状表格和一些特定需求CSS样式的更改

感觉文章有用的话还请给个三连呀！！！感谢！！

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！