vue+element实现多级表头加树结构

标题两种展示方式

方式一

在这里插入图片描述
完整代码:

<template>
  <div class="box">
    <el-table
      ref="areaPointTable"
      :data="tableData"
      border
      :span-method="objectSpanMethod"
      :header-cell-style="tableHeaderMerge"
    >
      <el-table-column
        :prop="item.prop?item.prop:''"
        :label="item.titleName"
        align="center"
        v-for="(item, index) in tableHeader"
        :key="index"
      >
        <template slot-scope="{ row, column, $index }">
          <span
            v-if="column.property=='bigType'"
            @click="handleDeleteN(row, column, $index)"
            :class="row[item.prop] == '未达标' ? 'text-red' : ''"
            :style="row[item.prop] < 0 ? 'color:red;' : ''"
            style="cursor: pointer;"
          >
            {{
            isNaN(row[item.prop])?row[item.prop]:
            row[item.prop] >= 0
            ? row[item.prop]
            : Math.abs(row[item.prop])
            }}
          </span>
          <span
            v-else
            :class="row[item.prop] == '未达标' ? 'text-red' : ''"
            :style="row[item.prop] < 0 ? 'color:red;' : ''"
          >
            {{
            isNaN(row[item.prop])?row[item.prop]:
            row[item.prop] >= 0
            ? row[item.prop]
            : Math.abs(row[item.prop])
            }}
          </span>
        </template>
        <el-table-column
          :prop="iteam.prop"
          :label="iteam.titleName"
          align="center"
          v-for="(iteam, idx) in item.childTitle"
          :key="idx"
        >
          <template slot-scope="{ row }">
            <span
              :class="row[iteam.prop] == '未达标' ? 'text-red' : ''"
              :style="row[iteam.prop] < 0 ? 'color:red;' : ''"
            >
              {{
              isNaN(row[iteam.prop])?row[iteam.prop]:
              row[iteam.prop] >= 0
              ? row[iteam.prop]
              : Math.abs(row[iteam.prop])
              }}
            </span>
          </template>
        </el-table-column>
      </el-table-column>
    
    </el-table>
  </div>
</template>
<script>
export default {
  name: 'demo',
  data() {
    return {
      input: '',
    
      tableHeader: [
        {
          titleName: '类型',
          childTitle: null,
          prop: 'bigType',
        },
        {
          titleName: '类型',
          childTitle: null,
          prop: 'smallType1',
        },
        {
          titleName: 'A',
          childTitle: [
            {
              titleName: 'a1',
              childTitle: null,
              prop: 'prop2',
            },
            {
              titleName: 'a2',
              childTitle: null,
              prop: 'prop3',
            },
          ],
        },
        {
          titleName: 'B',
          childTitle: [
            {
              titleName: 'b1',
              childTitle: null,
              prop: 'prop4',
            },
            {
              titleName: 'b2',
              childTitle: null,
              prop: 'prop5',
            },
            {
              titleName: 'b3',
              childTitle: null,
              prop: 'prop6',
            },
            {
              titleName: 'b4',
              childTitle: null,
              prop: 'prop7',
            },
          ],
        },
        {
          titleName: 'C',
          childTitle: [
            {
              titleName: 'c1',
              childTitle: null,
              prop: 'prop8',
            },
            {
              titleName: 'c2',
              childTitle: null,
              prop: 'prop9',
            },
            {
              titleName: 'c3',
              childTitle: null,
              prop: 'prop10',
            },
          ],
        },
        {
          titleName: 'D',
          childTitle: [
            {
              titleName: 'd1',
              childTitle: null,
              prop: 'prop11',
            },
            {
              titleName: 'd2',
              childTitle: null,
              prop: 'prop12',
            },
          ],
        },
        {
          titleName: 'W',
          childTitle: [
            {
              titleName: 'w1',
              childTitle: null,
              prop: 'prop13',
            },
            {
              titleName: 'w2',
              childTitle: null,
              prop: 'prop14',
            },
          ],
        },
      ],
      initTableData: [
        {
          id: 23,
          bigType: 'AA',
          smallType1: 'aa1',
          prop2: '1.0',
          prop3: '2.5',
          prop4: '40.0',
          prop5: '1.0',
          prop6: '2.5',
          prop7: '未达标',
          prop8: '0.0',
          prop9: '0.0',
          prop10: '0.0',
          prop11: '1.0',
          prop12: '100.0',
          prop13: '1.0',
          prop14: '100.0',
          rowspan: 1,
        },
        {
          id: 38,
          bigType: 'AA',
          smallType1: 'aa2',
          prop2: '8.0',
          prop3: '100.0',
          prop4: '2.0',
          prop5: '8.0',
          prop6: '100.0',
          prop7: '达标',
          prop8: '8.0',
          prop9: '0.0',
          prop10: '0.0',
          prop11: '6.0',
          prop12: '75.0',
          prop13: '8.0',
          prop14: '100.0',
        },
        {
          id: 53,
          bigType: 'AA',
          smallType1: 'aa3',
          prop2: '19.0',
          prop3: '47.5',
          prop4: '40.0',
          prop5: '19.0',
          prop6: '47.5',
          prop7: '未达标',
          prop8: '19.0',
          prop9: '0.0',
          prop10: '0.0',
          prop11: '19.0',
          prop12: '100.0',
          prop13: '19.0',
          prop14: '100.0',
        },
        {
          id: 68,
          bigType: 'AA',
          smallType1: 'aa4',
          prop2: '0.0',
          prop3: '0.0',
          prop4: '0.0',
          prop5: '0.0',
          prop6: '0.0',
          prop7: '未达标',
          prop8: '0.0',
          prop9: '0.0',
          prop10: '0.0',
          prop11: '0.0',
          prop12: '0.0',
          prop13: '0.0',
          prop14: '0.0',
        },
        {
          id: 83,
          bigType: 'XX',
          smallType1: 'xx1',
          prop2: '55.0',
          prop3: '0.0',
          prop4: '0.0',
          prop5: '76.0',
          prop6: '0.0',
          prop7: '未达标',
          prop8: '64.0',
          prop9: '0.0',
          prop10: '0.0',
          prop11: '65.0',
          prop12: '85.53',
          prop13: '61.0',
          prop14: '80.26',
          rowspan: 1,
        },
        {
          id: 831,
          bigType: 'XX',
          smallType1: 'xx2',
          prop2: '55.0',
          prop3: '0.0',
          prop4: '0.0',
          prop5: '76.0',
          prop6: '0.0',
          prop7: '未达标',
          prop8: '64.0',
          prop9: '0.0',
          prop10: '0.0',
          prop11: '65.0',
          prop12: '85.53',
          prop13: '61.0',
          prop14: '80.26',
          rowspan: 1,
        },
        {
          id: 832,
          bigType: 'XX',
          smallType1: 'xx3',
          prop2: '55.0',
          prop3: '0.0',
          prop4: '0.0',
          prop5: '76.0',
          prop6: '0.0',
          prop7: '未达标',
          prop8: '64.0',
          prop9: '0.0',
          prop10: '0.0',
          prop11: '65.0',
          prop12: '85.53',
          prop13: '61.0',
          prop14: '80.26',
          rowspan: 1,
        },
        {
          id: 98,
          bigType: 'QQ',
          smallType1: '-',
          prop2: '0.0',
          prop3: '0.0',
          prop4: '0.0',
          prop5: '0.0',
          prop6: '0.0',
          prop7: '未达标',
          prop8: '0.0',
          prop9: '0.0',
          prop10: '0.0',
          prop11: '0.0',
          prop12: '0.0',
          prop13: '0.0',
          prop14: '0.0',
          rowspan: 1,
        },
        {
          id: 113,
          bigType: 'WW',
          smallType1: 'ww',
          prop2: '0.0',
          prop3: '0.0',
          prop4: '0.0',
          prop5: '0.0',
          prop6: '0.0',
          prop7: '未达标',
          prop8: '0.0',
          prop9: '0.0',
          prop10: '0.0',
          prop11: '0.0',
          prop12: '0.0',
          prop13: '0.0',
          prop14: '0.0',
          rowspan: 1,
        },
        {
          id: 128,
          bigType: 'DD',
          smallType1: 'dd1',
          prop2: '1.0',
          prop3: '1.25',
          prop4: '80.0',
          prop5: '1.0',
          prop6: '1.25',
          prop7: '未达标',
          prop8: '1.0',
          prop9: '0.0',
          prop10: '0.0',
          prop11: '1.0',
          prop12: '100.0',
          prop13: '1.0',
          prop14: '100.0',
          rowspan: 1,
        },
        {
          id: 1281,
          bigType: 'DD',
          smallType1: 'dd2',
          prop2: '1.0',
          prop3: '1.25',
          prop4: '80.0',
          prop5: '1.0',
          prop6: '1.25',
          prop7: '未达标',
          prop8: '1.0',
          prop9: '0.0',
          prop10: '0.0',
          prop11: '1.0',
          prop12: '100.0',
          prop13: '1.0',
          prop14: '100.0',
          rowspan: 1,
        },
        {
          id: 1282,
          bigType: 'DD',
          smallType1: 'dd3',
          prop2: '1.0',
          prop3: '1.25',
          prop4: '80.0',
          prop5: '1.0',
          prop6: '1.25',
          prop7: '未达标',
          prop8: '1.0',
          prop9: '0.0',
          prop10: '0.0',
          prop11: '1.0',
          prop12: '100.0',
          prop13: '1.0',
          prop14: '100.0',
          rowspan: 1,
        },
      ],
      dialogTypeMergeArr: [
        {
          rowspan: 4,
          colspan: 1,
        },
        {
          rowspan: 0,
          colspan: 0,
        },
        {
          rowspan: 0,
          colspan: 0,
        },
        {
          rowspan: 0,
          colspan: 0,
        },
        {
          rowspan: 1,
          colspan: 1,
        },
        {
          rowspan: 1,
          colspan: 1,
        },
        {
          rowspan: 1,
          colspan: 1,
        },
        {
          rowspan: 1,
          colspan: 1,
        },
      ],
      tableData: [],
      select_box: [],
    }
  },
  mounted() {
    this.dealTableData(this.initTableData)
    this.dialogHeaderMergeArr = this.mergeTableHeader(this.tableHeader)
  },
  methods: {
    tableHeaderMerge({ row, column, rowIndex, columnIndex }) {
      console.log(312312)
      if (rowIndex == 0) {
        this.$nextTick(() => {
          // row[columnIndex].colSpan=this.dialogHeaderMergeArr[columnIndex];
          if (document.getElementsByClassName(column.id).length !== 0) {
            document
              .getElementsByClassName(column.id)[0]
              .setAttribute('colSpan', this.dialogHeaderMergeArr[columnIndex])
          }
        })
        if (this.dialogHeaderMergeArr[columnIndex] == 0) {
          return { display: 'none' }
        }
      }
    },
    mergeTableHeader(data) {
      let countArr = []
      let labelArr = []
      data.map((item) => {
        labelArr = countArr.map((obj) => obj.label)
        if (item.childTitle) {
          countArr.push({
            label: item.titleName,
            colSpan: item.childTitle.length,
            hasChild: true,
          })
        } else {
          if (labelArr.includes(item.titleName)) {
            countArr.map((iteam) => {
              if (iteam.label == item.titleName) iteam.colSpan += 1
            })
          } else {
            countArr.push({
              label: item.titleName,
              colSpan: 1,
              hasChild: false,
            })
          }
        }
      })
      let tableHeaderCountArr = []
      countArr.map((item) => {
        if (!item.hasChild) {
          for (var i = 0; i < item.colSpan - 1; i++) {
            tableHeaderCountArr.push(0)
          }
        }
        tableHeaderCountArr.push(item.colSpan)
      })
      return tableHeaderCountArr
    },
    /**
     * 处理表格数据合并行
     */
    dealTableData(data) {
      //把日期相同的数据并排在一块
      const list = this.margePropData(data, 'bigType')
      //处理日期相同的合并
      this.tableData = this.mergeRows(list, 'bigType')
    },

    handleDeleteN(row, column, $index) {
      this.initTableData.filter((item, index) => {
        if (row.bigType === item.bigType && index !== $index) {
        }

        // row.bigType === item.bigType && index !== 0
      })
      let curChildern = this.tableData.filter(
        (item, index) => row.bigType === item.bigType && index !== $index
      )
      let curChildern_init = this.initTableData.filter(
        (item, index) => row.bigType === item.bigType && row.smallType1 !== item.smallType1
      )

      if (this.tableData.filter((item, index) => row.bigType === item.bigType).length == 1) {
        if (curChildern.length > 1) {
          this.tableData.push(...curChildern)

          this.dealTableData(this.tableData)
        } else {
          this.tableData.push(...curChildern_init)

          this.dealTableData(this.tableData)
          return
        }
      } else {
        let newTableData = this.tableData.filter(
          (e) => curChildern.filter((x) => e.id != x.id).length == curChildern.length
        )

        // this.tableData = newTableData
        // this.tableData = this.tableData.filter((it, i) => row.id === it.id)
        this.dealTableData(newTableData)
      }
    },

    /**
     * 合并行
     * @param row
     * @param column
     * @param rowIndex
     * @param columnIndex
     * @returns {{colspan: number, rowspan: (number|*)}}
     */
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if ([0].includes(columnIndex)) {
        return {
          rowspan: row.rowspan,
          colspan: 1,
        }
      }
      // if (column.property == 'bigType') {
      //   return this.dialogTypeMergeArr[rowIndex]
      // }
    },
    /**
     * 数组中，某个属性相同的数据放在一块，如把某个日期相同的相连一起
     * @param list 传入的数组
     * @param prop 那个属性相同的数据
     * @returns {*[]}
     */
    margePropData(list = [], prop) {
      let arr = [],
        tempArr = {}
      list.forEach((item) => {
        if (!tempArr[item[prop]]) {
          tempArr[item[prop]] = [item]
        } else {
          tempArr[item[prop]].push(item)
        }
      })
      for (const tempArrKey in tempArr) {
        arr = [...arr, ...tempArr[tempArrKey]]
      }
      return arr
    },
    /**
     * 根据当前数据的位置，在数组中插入数据
     * 如数组【1，2，4，5】想要在2后面插入3，
     *1：首先获取到2的下标，
     *2：然后获取要插入之前的数据，获取要插入之后的数据，中间就是插入的位置
     *3：最后把这三个按顺序合并就得到在想要的位置插入数据
     * @param list
     * @param index
     * @param target
     */
    insertArrPositionOfIndex(list = [], index = 0, target = {}) {
      //根据index 找出小于index的数据放在左边
      const leftList = list.filter((t, i) => i < index)
      //根据index 找出大于index的数据放在右边
      const rightList = list.filter((t, i) => i >= index)
      // 最终合并数据
      return [...leftList, target, ...rightList]
    },
    /**
     * 合并行
     * @param list
     * @param prop
     */
    mergeRows(list = [], prop) {
      list.forEach((ele) => {
        ele.rowspan = 1
      })
      const len = list.length
      for (let i = 0; i < len; i++) {
        for (let j = i + 1; j < len; j++) {
          if (list[i][prop] === list[j][prop]) {
            list[i].rowspan++
            list[j].rowspan--
          }
        }
        // 这里跳过已经重复的数据
        i = i + list[i].rowspan - 1
      }
      return list
    },
  },
  /**
   * 对象数组去重
   * @param arr 数组
   * @param prop 根据什么字段去重
   * @returns {any[]}
   */ arrayDeduplication(arr, prop) {
    let map = new Map()
    return arr.filter((item) => !map.has(item[prop]) && map.set(item[prop], 1))
  },
}
</script>

方式二

在这里插入图片描述

<template>
  <el-table
    :data="tableData"
    row-key="id"
    :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
  >
    <el-table-column
      v-for="(column, index) in columns"
      :key="index"
      :label="column.titleName"
      :prop="column.prop"
      :width="column.width"
      :align="column.align"
    >
      <template slot-scope="{ row, $index }">{{ row[column.prop] }}</template>
      <el-table-column
        v-if="column.childTitle"
        v-for="(subColumn, subIndex) in column.childTitle"
        :key="subIndex"
        :label="subColumn.titleName"
        :prop="subColumn.prop"
        :width="subColumn.width"
        :align="subColumn.align"
      >
        <template slot-scope="{ row, $index }">{{ row[subColumn.prop] }}</template>
      </el-table-column>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          id: 1,
          bigType: 'AA',
          smallType1: 'aa1',
          prop2: '2.0',
          prop3: '5.0',
          prop4: '40.0',
          prop5: '2.0',
          prop6: '5.0',
          prop7: '未达标',
          prop8: '0.0',
          prop9: '0.0',
          prop10: '0.0',
          prop11: '2.0',
          prop12: '100.0',
          prop13: '2.0',
          prop14: '100.0',
          children: [
            {
              bigType: 'aa1',
              smallType1: 'aa1',
              prop2: '2.0',
              prop3: '5.0',
              prop4: '40.0',
              prop5: '2.0',
              prop6: '5.0',
              prop7: '未达标',
              prop8: '0.0',
              prop9: '0.0',
              prop10: '0.0',
              prop11: '2.0',
              prop12: '100.0',
              prop13: '2.0',
              prop14: '100.0',
              id: 2,
            },
            {
              bigType: 'aa2',
              smallType1: 'aa2',
              prop2: '8.0',
              prop3: '100.0',
              prop4: '2.0',
              prop5: '8.0',
              prop6: '100.0',
              prop7: '达标',
              prop8: '8.0',
              prop9: '0.0',
              prop10: '0.0',
              prop11: '6.0',
              prop12: '75.0',
              prop13: '8.0',
              prop14: '100.0',
              id: 3,
            },
            {
              bigType: 'aa3',
              smallType1: 'aa3',
              prop2: '19.0',
              prop3: '47.5',
              prop4: '40.0',
              prop5: '19.0',
              prop6: '47.5',
              prop7: '未达标',
              prop8: '19.0',
              prop9: '0.0',
              prop10: '0.0',
              prop11: '19.0',
              prop12: '100.0',
              prop13: '19.0',
              prop14: '100.0',
              id: 4,
            },
            {
              bigType: 'aa4',
              smallType1: 'aa4',
              prop2: '0.0',
              prop3: '0.0',
              prop4: '0.0',
              prop5: '0.0',
              prop6: '0.0',
              prop7: '未达标',
              prop8: '0.0',
              prop9: '0.0',
              prop10: '0.0',
              prop11: '0.0',
              prop12: '0.0',
              prop13: '0.0',
              prop14: '0.0',
              id: 5,
            },
          ],
        },
        {
          id: 6,
          bigType: 'BB',
          prop2: '55.0',
          prop3: '0.0',
          prop4: '0.0',
          prop5: '76.0',
          prop6: '0.0',
          prop7: '未达标',
          prop8: '64.0',
          prop9: '0.0',
          prop10: '0.0',
          prop11: '65.0',
          prop12: '85.53',
          prop13: '61.0',
          prop14: '80.26',
          children: [
            {
              bigType: 'bb1',
              smallType1: 'bb1',
              prop2: '55.0',
              prop3: '0.0',
              prop4: '0.0',
              prop5: '76.0',
              prop6: '0.0',
              prop7: '未达标',
              prop8: '64.0',
              prop9: '0.0',
              prop10: '0.0',
              prop11: '65.0',
              prop12: '85.53',
              prop13: '61.0',
              prop14: '80.26',
              id: 7,
            },
            {
              bigType: 'bb2',
              smallType1: 'bb2',
              prop2: '55.0',
              prop3: '0.0',
              prop4: '0.0',
              prop5: '76.0',
              prop6: '0.0',
              prop7: '未达标',
              prop8: '64.0',
              prop9: '0.0',
              prop10: '0.0',
              prop11: '65.0',
              prop12: '85.53',
              prop13: '61.0',
              prop14: '80.26',
              id: 17,
            },
          ],
        },
        {
          id: 8,
          bigType: 'DD',
          prop2: '0.0',
          prop3: '0.0',
          prop4: '0.0',
          prop5: '0.0',
          prop6: '0.0',
          prop7: '未达标',
          prop8: '0.0',
          prop9: '0.0',
          prop10: '0.0',
          prop11: '0.0',
          prop12: '0.0',
          prop13: '0.0',
          prop14: '0.0',
          children: [
            {
              bigType: 'dd1',
              smallType1: 'dd1',
              prop2: '0.0',
              prop3: '0.0',
              prop4: '0.0',
              prop5: '0.0',
              prop6: '0.0',
              prop7: '未达标',
              prop8: '0.0',
              prop9: '0.0',
              prop10: '0.0',
              prop11: '0.0',
              prop12: '0.0',
              prop13: '0.0',
              prop14: '0.0',
              id: 9,
            },
          ],
        },
      ],
      columns: [
        {
          titleName: '类型',
          childTitle: null,
          prop: 'bigType',
        },

        {
          titleName: 'A',
          childTitle: [
            {
              titleName: 'a1',
              childTitle: null,
              prop: 'prop2',
            },
            {
              titleName: 'a2',
              childTitle: null,
              prop: 'prop3',
            },
          ],
        },
        {
          titleName: 'B',
          childTitle: [
            {
              titleName: 'b1',
              childTitle: null,
              prop: 'prop4',
            },
            {
              titleName: 'b2',
              childTitle: null,
              prop: 'prop5',
            },
            {
              titleName: 'b3',
              childTitle: null,
              prop: 'prop6',
            },
            {
              titleName: 'b4',
              childTitle: null,
              prop: 'prop7',
            },
          ],
        },
        {
          titleName: 'C',
          childTitle: [
            {
              titleName: 'c1',
              childTitle: null,
              prop: 'prop8',
            },
            {
              titleName: 'c2',
              childTitle: null,
              prop: 'prop9',
            },
            {
              titleName: 'c3',
              childTitle: null,
              prop: 'prop10',
            },
          ],
        },
        {
          titleName: 'D',
          childTitle: [
            {
              titleName: 'd1',
              childTitle: null,
              prop: 'prop11',
            },
            {
              titleName: 'd2',
              childTitle: null,
              prop: 'prop12',
            },
          ],
        },
        {
          titleName: 'W',
          childTitle: [
            {
              titleName: 'w1',
              childTitle: null,
              prop: 'prop13',
            },
            {
              titleName: 'w2',
              childTitle: null,
              prop: 'prop14',
            },
          ],
        },
      ],
    }
  },
}
</script>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/160222.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

Nacos 配置中心底层原理（1.X版本）

Nacos 配置中心底层原理（1.X版本）

前言 Nacos 1.X版本 是长轮询 Nacos 2.X版本 是GRPC 长轮询 概念 客户端会轮询向服务端发出一个长连接请求&#xff0c;这个长连接最多30s就会超时&#xff0c;服务端收到客户端的请求会先判断当前是否有配置更新&#xff0c;有则立即返回&#xff0c;如果没有服务端会将这个…
阅读更多...
第三方付支付-聚合支付系统设计方案

第三方付支付-聚合支付系统设计方案

第三方付支付-聚合支付系统设计方案 阅读须知&#xff1a;本文仅针对聚合支付平台的核心功能架构基本概要,不涉及技术方案 目录&#xff1a;渠道管理&#xff0c;订单管理&#xff0c;对账管理&#xff0c;商家管理&#xff0c;代理管理&#xff0c;账号管理&#xff0c;风控…
阅读更多...
LTD.com再度荣获“2023中国产业数字化技术赋能先锋”

LTD.com再度荣获“2023中国产业数字化技术赋能先锋”

2023年11月17日&#xff0c;由托比网主办的“第十届中国产业数字化大会”在江苏南京顺利召开。作为国内产业数字化领域的年度盛会&#xff0c;会议得到了江苏省商务厅、南京市政府的支持&#xff0c;由南京市商务局主办&#xff0c;南京鼓楼区政府提供特别支持。 会议在精彩的议…
阅读更多...
vite vue3 配置pinia

vite vue3 配置pinia

准备 https://blog.csdn.net/qq_36437991/article/details/134474050 安装pinia 官网 yarn add piniasrc下新建store文件夹&#xff0c;该文件夹下新建index.ts import { createPinia } from "pinia"; const store createPinia(); export default store;修改ma…
阅读更多...
挑战单芯片NOA，这款“All in one”方案或将改变主流市场走向

挑战单芯片NOA，这款“All in one”方案或将改变主流市场走向

随着降本增效、电子架构升级&#xff08;尤其是跨域计算、多域融合等概念&#xff09;以及供应链减复&#xff08;降低电子物料的SKU&#xff09;的需求愈加明确&#xff0c;对于车载计算赛道&#xff0c;也带来新的变化。 比如&#xff0c;去年9月&#xff0c;英伟达率先发布下…
阅读更多...
每天一点python——day69

每天一点python——day69

#字符串的比较操作使用的符号&#xff1a; >[大于]&#xff0c;>[大于等于]&#xff0c;<[小于]&#xff0c;<[小于等于]&#xff0c;[等于]&#xff0c;![不等于]#如图&#xff1a; #例子&#xff1a;比较原理释义&#xff1a;每个字符在计算机里面都有一个原始值…
阅读更多...
一次显著的接口性能优化，从10s优化到0.9s

一次显著的接口性能优化，从10s优化到0.9s

最近在登录项目后台的时候&#xff0c;发现当我输入账号和密码后&#xff0c;竟然就卡在了 Loading 页面。。 加载了10S才进后台 等了足足 10S 才进去后台&#xff01; 通过 F12&#xff0c;打开 Network 网络请求一看&#xff0c;竟然是因为有两个接口返回的数据太慢了&#…
阅读更多...
echarts双轴刻度线y轴刻度线对齐

echarts双轴刻度线y轴刻度线对齐

splitNumber属性主要用于设置坐标轴分割的段数。例如&#xff0c;在类目轴&#xff08;category&#xff09;中&#xff0c;可以通过设置splitNumber属性来控制坐标轴被分割成的段数。需要注意的是&#xff0c;这个分割段数只是一个预估值&#xff0c;最终实际显示的段数会在这…
阅读更多...
【cpolar】Ubuntu本地快速搭建web小游戏网站，公网用户远程访问

【cpolar】Ubuntu本地快速搭建web小游戏网站，公网用户远程访问

&#x1f3a5; 个人主页&#xff1a;深鱼~&#x1f525;收录专栏&#xff1a;cpolar&#x1f304;欢迎 &#x1f44d;点赞✍评论⭐收藏 目录 前言 1. 本地环境服务搭建 2. 局域网测试访问 3. 内网穿透 3.1 ubuntu本地安装cpolar 3.2 创建隧道 3.3 测试公网访问 4. 配置…
阅读更多...
【SAP-QUERY】QUERY报表的创建

【SAP-QUERY】QUERY报表的创建

SQ03&#xff1a;创建用户组 环境-》查询区域-》选择标准区域 创建用户组和用户组描述 可选分配权限&#xff08;授权当前用户组下人员可以修改该query报表&#xff09; SQ02&#xff1a;创建信息集 确认区域是否为标准区域 选择创建的用户组 创建信息集&#xff1a;输入描述&a…
阅读更多...
MaxScale读写分离

MaxScale读写分离

文章目录 项目背景读写分离读写分离简介环境准备配置虚拟机环境部署主从同步master主机slave主机 MaxScale简介部署MaxScale服务器授权用户master主机操作slave主机操作启动服务 测试读写分离服务 总结 项目背景 之前无论是Wordpress博客项目还是HIS医疗项目&#xff0c;我们都…
阅读更多...
二、程序员指南：数据平面开发套件

二、程序员指南：数据平面开发套件

MEMPOOL库 内存池是固定大小对象的分配器。在DPDK中&#xff0c;它由名称标识&#xff0c;并使用环形结构来存储空闲对象。它提供一些其他可选服务&#xff0c;例如每个核心的对象缓存和一个对齐辅助工具&#xff0c;以确保对象填充以将它们均匀分布在所有DRAM或DDR3通道上。 …
阅读更多...
视频会议设备如何安装？

视频会议设备如何安装？

视频会议设备如何安装&#xff1f; 注意&#xff1a; 建议在干燥通风常温环境下使用 使用接地稳压电源 通电次序&#xff1a;先插网线&#xff0c;再插电源&#xff0c;再上电 IP地址的设置 有两种方式访问并设置连通宝服务器&#xff1a;即插即用和网线直连。 即插即用 …
阅读更多...
算法：记忆化搜索

算法：记忆化搜索

文章目录 记忆化搜索斐波那契数列 例题不同路径最长递增子序列猜数字大小矩阵中的最长递增路径 记忆化搜索的原理其实很简单&#xff0c;简单来说就是对暴力搜索的一些优化&#xff0c;因此整体上来讲难度不高 记忆化搜索 所谓记忆化搜索&#xff0c;直白来说就是一个带有备忘…
阅读更多...
mock测试数据

mock测试数据

1.下载一个jar 架包 地址&#xff1a;链接&#xff1a;https://pan.baidu.com/s/1G5rVF5LlIYpyU-_KHsGjOA?pwdab12 提取码&#xff1a;ab12 2.配置当前电脑java环境变量 3.在同一文件目录下创建json 数据4.在终端切换到当前目录下启动服务&#xff0c; java -jar ./moco-r…
阅读更多...
HIS医疗项目

HIS医疗项目

文章目录 医疗项目简介HIS项目介绍HIS架构解析HIS业务流程图HIS项目架构图 HIS组件解析——服务支撑 内存设置为4G或以上部署NGINX服务部署web安装JDK部署Elasticsearch安装ik中文分词器 部署rabbitmq部署MySQL服务安装MySQL服务建库、授权用户导入数据 部署Redis测试Redis 部署…
阅读更多...
Redis篇---第五篇

Redis篇---第五篇

系列文章目录 文章目录 系列文章目录前言一、持久化有两种，那应该怎么选择呢？二、怎么使用 Redis 实现消息队列？三、说说你对Redis事务的理解前言 前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不住分享一下给大家。点击跳转到网站，这篇文章男女通用，…
阅读更多...
医院数字化LIS（检验信息系统）源码

医院数字化LIS（检验信息系统）源码

临床检验信息管理系统&#xff08;LIS&#xff09;是利用计算机连接医疗设备&#xff0c;通过计算机信息处理技术&#xff0c;将医院检验科或实验室的临床检验数据进行自动收集、存储、处理、提取、传输和交换&#xff0c;满足所有授权用户的功能需求。 一、系统概述 1.LIS&am…
阅读更多...
新材料企业ERP有几种?能帮助企业解决哪些问题

新材料企业ERP有几种?能帮助企业解决哪些问题

在我们的生活当中会遇到各种各样的新材料&#xff0c;这些新材料对应不同的制造工艺、品质检验标准、生产工序、制造设备等。有些新材料企业的营销渠道不止一个&#xff0c;各个营销平台的经营策略和商品维护流程各不相同&#xff0c;而这也使得日常的管理工作量较大。 经过多…
阅读更多...
盘点52个Python各行各业管理系统源码Python爱好者不容错过

盘点52个Python各行各业管理系统源码Python爱好者不容错过

盘点52个Python各行各业管理系统源码Python爱好者不容错过 学习知识费力气&#xff0c;收集整理更不易。 知识付费甚欢喜&#xff0c;为咱码农谋福利。 源码下载链接&#xff1a;https://pan.baidu.com/s/1pcP-94UY_57sAd2oDB3i6Q?pwd8888 提取码&#xff1a;8888 项目名…
阅读更多...
最新文章

Copyright @ 2022~2023