维护el-table列，循环生成el-table

1、lib/setting.js（维护table列）

javascript 复制代码

const columns=[
	{ label: '类型', prop: 'energyName', width: '150', isText: true },
	{ label: '消耗量(t或10⁴m³)', prop: 'inputNum', isInput: true },
	{
	  label: 'CO₂',
	  children: [
		// { label: '核算因子', prop: 'co2FactorValue', width: '120', isShow: false },
		{ label: '排放量', prop: 'co2Value', width: '120' },
		{ label: '排放因子', prop: 'co2FactorType', isSelect: true }
	  ]
	},
	{
	  label: 'CH₄',
	  children: [
		// { label: '核算因子', prop: 'ch4FactorValue', width: '120' },
		{ label: '排放量', prop: 'ch4Value', width: '120' },
		{ label: '排放因子', prop: 'ch4FactorType', isSelect: true }
	  ]
	},
	{
	  label: 'N₂O',
	  children: [
		{ label: '排放量', prop: 'n2oValue', width: '120' },
		{ label: '排放因子', prop: 'n2oFactorType', isSelect: true }
	  ]
	}
  ]

2、customTable.vue

html 复制代码

<template>
	<slot name="title"> </slot>
<!-- show-summary  -->
	<el-table :data="tableData" show-summary style="width: 99%;" class="elTable">
		<el-table-column v-for="(column, index) in columns" :key="index" :prop="column.prop" :label="column.label" :width="column.width">
			<template v-if="!column.children" #default="scope">
				<div>
					{{ column.isText ? scope.row[column.prop] : "" }}
					<el-input v-if="column.isInput" v-model="scope.row[column.prop]" @change="inputNum(scope.row)" :disabled="props.isDetail"/>
					<input-select-module v-if="column.isSelect"></input-select-module>
				</div>
			</template>
			<template v-if="column.children">
				<el-table-column v-for="(subColumn, subIndex) in column.children"  :key="subIndex" :prop="subColumn.prop" :label="subColumn.label" :width="subColumn.width">
					<template #default="scope">
						<el-input v-if="subColumn.isInput" v-model="scope.row[subColumn.prop]" :disabled="props.isDetail"/>
						<input-select-module v-if="subColumn.isSelect" v-model:row="scope.row" v-model:disabled="props.isDetail" v-model:subColumn="subColumn.prop" @changeFactorValue="changeFactorValue(scope.row, scope.row[subColumn.prop])"></input-select-module>
					</template>
				</el-table-column>
			</template>
		</el-table-column>
	</el-table>
</template>

做了个自定义组件

组件描述：选择值为缺省值时，该组件为下拉框，选择值为自测值时，组件为输入框

html 复制代码

<template>
  <div>
    <!-- v-model="props.inputVal" -->
    <el-input type="text" v-model="props.row[props.subColumn]" @change="changeInput(props.row[props.subColumn])"
      id="input-select" @click="click" :readonly="inputReadonly" style="position: relative" />
    <div class="dropdown" :style="dropdownStyle">
      <div class="dropdown-item" data-value="自测值" @click="clickdropdown('自测值')">自测值</div>
      <div class="dropdown-item" data-value="缺省值" @click="clickdropdown('缺省值')">缺省值</div>
    </div>
  </div>
</template>

<script setup>
import { ref, defineEmits, watch } from 'vue'

const props = defineProps({
  subColumn: {
    type: String,
    required: true
  },
  row: {
    type: Object,
    required: true
  },
  disabled: {
    type: Boolean,
  },
})

const emit = defineEmits(['changeFactorType'])

const inputReadonly = ref(true)
const dropdownStyle = ref({ display: 'none' })

window.addEventListener('click', (event) => {
  if (!props.disabled) {
    if (event.target.id != 'input-select') {
      dropdownStyle.value = { display: 'none' }
    } else {
    }
  }
})
window.addEventListener('scroll', function () {
  for (var i = 0; i < document.getElementsByClassName("dropdown").length; i++) {
    document.getElementsByClassName("dropdown")[i].style.display = 'none';
  }
}, true)

const click = (event) => {
  debugger
  if (!props.disabled) {
    for (var i = 0; i < document.getElementsByClassName('dropdown').length; i++) {
      document.getElementsByClassName('dropdown')[i].style.display = 'none'
    }

    var rect = event.target.getBoundingClientRect();

    // 打印元素的位置
    let top=rect.top+32;
    let left=rect.left-10;
    dropdownStyle.value = {
        display: 'block',
        position: 'fixed',
        top:top+'px',
        left:left+"px",
        border: '#909399 1px solid',
        'border-radius': '4px',
        background: '#fff',
        'z-index': '100',
        width: '150px'
      }
  }
}

// 选择自测值,缺省值,控制下拉框显隐
// 选择:缺省值-计算方式:消耗量*默认核算因子
// 选择:自测值-排放因子输入框清空,手动填写
const clickdropdown = (val) => {

  dropdownStyle.value = { display: 'none' }
  if (val == '缺省值') {
    props.row[props.subColumn] = val
    props.subColumn == 'co2FactorType'
      ? (props.row.co2Value = props.row.inputNum * props.row.co2FactorValue)
      : props.subColumn == 'ch4FactorType'
        ? (props.row.ch4Value = props.row.inputNum * props.row.ch4FactorValue)
        : (props.row.n2oValue = props.row.inputNum * props.row.n2oFactorValue)
    inputReadonly.value = true
    dropdownStyle.value = { display: 'none' }
  } else if (val == '自测值') {
    props.subColumn == 'co2FactorType'
      ? (props.row.co2Value = '')
      : props.subColumn == 'ch4FactorType'
        ? (props.row.ch4Value = '')
        : (props.row.n2oValue = '')
    props.row[props.subColumn] = ''
    inputReadonly.value = false
    dropdownStyle.value = { display: 'none' }
  }
}

// 排放因子为自测值时,计算排放量,计算公式:消耗量 * 排放因子
const changeInput = (value) => {
  if (value != '自测值' && value != '缺省值') {
    if (!/^-?\d+(\.\d+)?$/.test(value)) {
      ElMessage.error('输入不合法')
      props.row[props.subColumn] = ''
      props.subColumn == 'co2FactorType'
        ? (props.row.co2Value = '')
        : props.subColumn == 'ch4FactorType'
          ? (props.row.ch4Value = '')
          : (props.row.n2oValue = '')
    } else if (props.row.inputNum != '') {
      props.subColumn == 'co2FactorType'
        ? (props.row.co2Value = props.row.inputNum * value)
        : props.subColumn == 'ch4FactorType'
          ? (props.row.ch4Value = props.row.inputNum * value)
          : (props.row.n2oValue = props.row.inputNum * value)
    }
  }
}

</script>

<style>
.dropdown {
  border: #3f3f3f 1px solid;
  position: absolute;
  width: 120px;
}

.dropdown-item {
  cursor: pointer;
  text-indent: 8px;
}
</style>