table表格表单这类

封装一个table表格

<template>
  <div class="line-box">
    <el-row v-for="(column, index) in list" :key="index">
      <div v-for="(item, itemIndex) in column" :key="itemIndex">
        <div v-if="item.span === 24">
          <el-col class="flex" :span="24">
            <div>{{ item.mark }}</div>
          </el-col>
        </div>
        <div v-else>
          <el-col
            class="flex"
            :span="item.span || 4"
            :class="{ lose1px: item.span === 12 }"
          >
            <div>{{ item.mark }}</div>
          </el-col>
          <el-col :span="item.span || 8" :class="{ add1px: item.span === 12 }">
            <div>{{ item.prop }}</div>
          </el-col>
        </div>
      </div>
    </el-row>
  </div>
</template>
<script>
export default {
  data() {
    return {
      labelPosition: 'right',
      formLabelAlign: {
        name: '',
        region: '',
        type: ''
      },
      bankSchema: [
        {
          label: 'table.btBankAcc.bankAcc',
          prop: 'bankAcc',
          mark: '银行账号'
        },
        {
          label: 'table.btBankAcc.accName',
          prop: 'accName',
          mark: '账户名称'
        },
        // { label: '境内/境外账号', prop: 'isDomesticBank' },
        {
          label: 'table.btBankAccApp.isDomesticBank',
          prop: 'isDomesticBank',
          span: 12,
          mark: '境内/境外账号'
        },
        { label: 'table.btBankAcc.corpId', prop: 'corpName', mark: '单位ID' },
        {
          label: 'table.btBankAcc.bankTypeId',
          prop: 'bankTypeName',
          mark: '银行类别'
        },
        {
          label: 'table.btBankAcc.bankName',
          prop: 'bankName',
          mark: '开户行名称'
        },
        {
          label: 'table.btBankAcc.bankCode',
          prop: 'bankCode',
          mark: '开户行行号'
        },
        {
          label: 'table.btBankAcc.natureId',
          prop: 'natureName',
          mark: '账户性质',
          span: 12
        },
        {
          label: 'table.btBankAcc.attributeId',
          prop: 'attributeName',
          mark: '账户属性'
        },
        {
          label: 'table.btBankAcc.bifCode',
          prop: 'bifName',
          mark: '接口代码',
          span: 24
        },
        {
          label: 'table.btBankAcc.electricBill',
          prop: 'electricBill',
          mark: '票据专户'
        },
        {
          label: 'table.btBankAccApp.curId',
          prop: 'electricBill',
          mark: '币别'
        }
      ],
      list: []
    }
  },
  mounted() {
    this.handleData()
  },
  methods: {
    handleData() {
      const arr = []
      for (let i = 0; i < this.bankSchema.length; i++) {
        if (this.bankSchema[i].span === 24) {
          arr.push([this.bankSchema[i]])
        } else if (this.bankSchema[i].span === 12) {
          arr.push([this.bankSchema[i]])
        } else if (
          this.bankSchema[i].span === 6 ||
          this.bankSchema[i].span === undefined
        ) {
          arr.push([this.bankSchema[i]])
          const index = i + 1
          if (
            this.bankSchema[index] &&
            (this.bankSchema[index].span === 6 ||
              this.bankSchema[index].span === undefined)
          ) {
            arr[arr.length - 1].push(this.bankSchema[index])
            i++
          }
          let totalspan = 0
          arr[arr.length - 1].forEach(item => {
            totalspan += item.span || 6
          })

          if (totalspan !== 12 && totalspan !== 24) {
            arr[arr.length - 1][0].span = 12
          }
        }
      }
      this.list = arr
    }
  }
}
</script>
<style>
.line-box {
  border-top: 1px solid #000;
  border-left: 1px solid #000;
  box-sizing: border-box; /* 确保边框包含在元素尺寸内 */
}

.el-col {
  border-bottom: 1px solid #000;
  border-right: 1px solid #000;
  height: 30px;
  box-sizing: border-box; /* 确保边框包含在元素尺寸内 */
}
.lose1px {
  width: calc(50% - 1px);
}
.add1px {
  width: calc(50% + 1px);
}
</style>