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

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

<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>

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

<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) => {debuggerif (!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] = valprops.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 = truedropdownStyle.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 = falsedropdownStyle.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>