vue 3.0 详情table 支持动态列

最新推荐文章于 2024-07-06 01:35:56 发布

web_Hsir

最新推荐文章于 2024-07-06 01:35:56 发布

阅读量523

点赞数 9

文章标签： vue.js javascript ecmascript

本文链接：https://blog.csdn.net/weixin_44185995/article/details/135077942

版权

<template>
  <div class="detail-table">
    <div
      v-for="(row, key) in config"
      :key="key"
      class="detail-item"
      :style="{ width: `${cellWidth(key)}` }"
    >
      <div class="detail-label">{{ row }}</div>
      <div class="detail-value">
        <slot :name="key" :row="data">
          {{ data[key] || '' }}
        </slot>
      </div>
    </div>
  </div>
</template>

<script setup name="DetailTable">
import NP from '@/utils/number-precision'
NP.enableBoundaryChecking(false)
const props = defineProps({
  data: {
    type: Object,
    required: true,
    default: () => {}
  },
  config: {
    type: Object,
    required: true,
    default: () => {}
  },
  columnsPerRow: {
    type: Number,
    required: false,
    default: 3
  },
  colums: {
    type: Object,
    required: false,
    default: () => {}
  }
})
function cellWidth(key) {
  const { columnsPerRow, colums } = props
  let base = NP.divide(100, columnsPerRow)
  if (!isEmptyObject(colums)) {
    if (Object.keys(colums).includes(key)) {
      if (colums[key] % columnsPerRow === 0) {
        base = 99.9
      } else {
        base = NP.times(props.colums[key], base)
      }
    }
  }
  return `${base}%`
}
function isEmptyObject(obj) {
  for (var key in obj) {
    if (obj.hasOwnProperty(key)) {
      return false
    }
  }
  return true
}
</script>

<style lang="scss" scoped>
.detail-table {
  display: flex;
  flex-wrap: wrap;
  .detail-item {
    border: 1px solid #d9d9d9;
    margin-top: -1px;
    margin-left: -1px;
    min-height: 38px;
    display: flex;
    .detail-label {
      font-weight: bold;
      border-right: 1px solid #d9d9d9;
      display: flex;
      width: 130px;
      padding: 0 10px;
      text-align: center;
      background: #f3f3f3;
      align-items: center;
      justify-content: center;
    }

    .detail-value {
      display: flex;
      align-items: center;
      flex: 1;
      background: #fff;
      word-wrap: break-word;
      word-break: break-all;
      padding-left: 10px;
    }
  }
}
</style>

<a-collapse-panel key="1" header="基本信息">
          <detail-table :config="basic" :data="info">
            <template #type="{ row }">
              {{ $formatDict(row.type, sys_supplier_type) }}
            </template>
          </detail-table>
        </a-collapse-panel>

<script setup>


const basic = {
  code: '供应商编码',
  name: '供应商名称',
  SettlementMethod: '结算方式',
  remark: '备注'
}
</script>

优化版

<template>
  <div class="detail-table">
    <div
      v-for="(row, key) in config"
      :key="key"
      class="detail-item"
      :style="cellWidth(key)"
    >
      <div class="detail-label">{{ row }}</div>
      <div class="detail-value">
        <slot :name="key" :row="data">
          {{ data[key] || '' }}
        </slot>
      </div>
    </div>
  </div>
</template>

<script setup name="DetailTable">
import NP from '@/utils/number-precision'
NP.enableBoundaryChecking(false)
const props = defineProps({
  data: {
    type: Object,
    required: true,
    default: () => {}
  },
  config: {
    type: Object,
    required: true,
    default: () => {}
  },
  columnsPerRow: {
    type: Number,
    required: false,
    default: 8
  },
  colums: {
    type: Object,
    required: false,
    default: () => {}
  }
})
function cellWidth(key) {
  const { columnsPerRow, colums } = props
  let flexBasis = (columnsPerRow / 24) * 100
  if (!isEmptyObject(colums)) {
    if (Object.keys(colums).includes(key)) {
      flexBasis = (colums[key] / 24) * 100
    }
  }
  return {
    flex: `1 1 ${flexBasis}%`
  }
}
function isEmptyObject(obj) {
  for (var key in obj) {
    if (obj.hasOwnProperty(key)) {
      return false
    }
  }
  return true
}
</script>

<style lang="scss" scoped>
.detail-table {
  display: flex;
  flex-wrap: wrap;
  .detail-item {
    border: 1px solid #d9d9d9;
    margin-top: -1px;
    margin-left: -1px;
    min-height: 38px;
    display: flex;
    .detail-label {
      font-weight: bold;
      border-right: 1px solid #d9d9d9;
      display: flex;
      width: 130px;
      padding: 0 10px;
      text-align: center;
      background: #f3f3f3;
      align-items: center;
      justify-content: center;
    }

    .detail-value {
      display: flex;
      align-items: center;
      flex: 1;
      background: #fff;
      word-wrap: break-word;
      word-break: break-all;
      padding-left: 10px;
    }
  }
}
</style>

 <detail-table
            :config="basic"
            :data="info"
            :colums="{
              remark: 16
            }"
          >
            <template #type="{ row }">
              {{ $formatDict(row.type, sys_supplier_type) }}
            </template>
          </detail-table>