element树状表格实现

---

树状表格

需求样式

应用场景

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

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

实现需求

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

简单实现

引入方法

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 + 1
      temp[data[k][pid]]['children'].push(data[k])
    } else {
      res.push(data[k])
    }
  }
  return res
}

页面代码

<template>
  <div class>
    <div class="table-box">
      <el-table
        :data="organizaDataList"
        row-key="id"
        border
        style="width: 100%;"
        :cell-style="columnStyle"
        :header-cell-style="headerStyle"
      >
        <el-table-column
          v-for="(item,index) in organizaColumns"
          :key="index"
          :label="item.label"
          :prop="item.props"
          :width="item.width"
        >
          <template slot-scope="scope">
            <span>{{ JudgmentData(scope.row[item.props])?scope.row[item.props]: '-'}}</span>
          </template>
        </el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          width="240"
          label="操作">
          <template slot-scope="scope">
            <div class="operation">
              <div>
                <el-button type="primary" plain size="small" >修改</el-button>
                <el-button type="danger" plain size="small" @click="deleteHandle(scope.row.id)">删除</el-button>
              </div>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
import { isNull,treeDataTranslate } from "../../utils/index.js";
export default {
  name: "",
  components: {},
  props: {},
  watch: {},
  data() {
    return {
      organizaDataList: [
        {
          city: "唐山市",
          createdTime: "2021-12-27 17:15:36",
          deleted: 0,
          districtCounty: "路北区",
          id: 6,
          lastUpdatedTime: "2022-02-22 16:34:31",
          name: "中信银行",
          optimisticLock: 1,
          parentId: 7,
          province: "河北省",
          supervisePastures: "[3]",
          type: 3,
        },
        {
          city: "成都市",
          createdTime: "2022-01-20 14:38:45",
          deleted: 0,
          districtCounty: "锦江区",
          id: 7,
          lastUpdatedTime: "2022-02-24 11:09:01",
          name: "金投银行",
          optimisticLock: 1,
          parentId: 0,
          province: "四川省",
          supervisePastures: "[1,2]",
          type: 3,
        },
        {
          city: "成都市",
          createdTime: "2022-01-20 14:39:02",
          deleted: 0,
          districtCounty: "锦江区",
          id: 8,
          lastUpdatedTime: "2022-02-24 11:09:02",
          name: "中国建设银行",
          optimisticLock: 1,
          parentId: 0,
          province: "四川省",
          supervisePastures: "[1,2]",
          type: 3,
        },
        {
          city: "成都市",
          createdTime: "2022-01-28 14:26:28",
          deleted: 0,
          districtCounty: "锦江区",
          id: 9,
          lastUpdatedTime: "2022-02-24 11:09:02",
          name: "中信银行成都分行",
          optimisticLock: 1,
          parentId: 6,
          province: "四川省",
          supervisePastures: "[1,2,3,4,5,6,7,8,9,10]",
          type: 3,
        },
        {
          city: "成都市",
          createdTime: "2022-01-28 14:26:39",
          deleted: 0,
          districtCounty: "锦江区",
          id: 10,
          lastUpdatedTime: "2022-02-24 11:09:02",
          name: "中信银行成都分行娇子大道支行",
          optimisticLock: 1,
          parentId: 9,
          province: "四川省",
          supervisePastures: null,
          type: 3,
        },
        {
          city: "绵阳市",
          createdTime: "2022-01-28 14:27:08",
          deleted: 0,
          districtCounty: "锦江区",
          id: 11,
          lastUpdatedTime: "2022-02-24 11:09:02",
          name: "中信银行绵阳分行",
          optimisticLock: 1,
          parentId: 6,
          province: "四川省",
          supervisePastures: null,
          type: 3,
        },
        {
          city: "成都市",
          createdTime: "2022-02-08 14:44:27",
          deleted: 0,
          districtCounty: "锦江区",
          id: 15,
          lastUpdatedTime: "2022-02-24 11:09:02",
          name: "招商银行",
          optimisticLock: 1,
          parentId: 0,
          province: "四川省",
          supervisePastures: "[]",
          type: 3,
        }
      ],
      organizaColumns: [
        { label: "组织名称", props: "name", width: "" },
        { label: "创建时间", props: "createdTime", width: "" },
      ],
    };
  },
  computed: {
    JudgmentData() {
      return (data)=>{
          let status = !isNull(data)
          return status
        }
    }
  },
  created() {
    this.changeData()
  },
  mounted() {},
  methods: {
    // 树形数据转换
    changeData() {
      this.organizaDataList = treeDataTranslate( this.organizaDataList, 'id')
    },
    // 更改单元格样式
    columnStyle({ row, column, rowIndex, columnIndex }) {
      return {
        height: "40px",
        'padding': '0px',
        'text-align': 'center',
      };
    },
    // 更改表头单元格样式
    headerStyle({ row, column, rowIndex, columnIndex }) {
      return {
        height: "45px",
        'background': '#EEF4FF',
        'padding': '0px',
        'text-align': 'center',
        'color': '#333333',
        'font-size': '14px',
        'font-weight': 400,
      };
    },
    deleteHandle() {},
  }
};
</script>
<style scoped lang="less">
.table-box {
  padding: 50px;
}
</style>

实现效果

跟需求相比，还需要对齐

优化

层级显现

代码

更改上面的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',
        };
      }
    },

实现效果

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

单元格文字对齐

<style scoped lang="less">
.table-box {
  padding: 50px;
  // 通过更改css样式来实现
  /deep/ .el-table__row:not([class*='el-table__row--level-']) {
    td:first-child {
      padding-left: 72px !important;
    }
  }
// 这里使用的是正则方法：例如  class*="val" 指的是class属性值包含val这三个字符就可以
// :not() 用来匹配不符合一组选择器的元素,例如  p:not(.fancy)  指的是类名不是fancy的<p> 元素
}
</style>

总结

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

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