業務需求：

? ? ? ? 1、需要點擊編輯時，全部表格顯示編輯框，點擊保存，全部保存。

? ? ? ? 2、因為位置問題，產品經理把24小時分成了兩行，開發就得分兩個表格。列標題是寫死的，文字偏移也是寫死的，其他數據后臺返回，兩個表用了一個數據源。

columns使用了循環，?edit-config?設置了 autoClear 屬性為 false，在用戶輸入時，編輯器不會自動清除文本框中的內容。使用了默認插槽，v-if else顯示輸入框

?

        <div class="tableInfo"><div class="header"><div class="title">xxxx</div><div class="rightBtn"><el-button type="primary" @click="editTableTempUp()" v-if="edit">編輯</el-button><el-button type="primary" @click="clearEditTempUp()" v-if="!edit">保存</el-button></div></div><vxe-table ref="tableRefTempUp1" :data="tableDataTempUp" border height="100px" :column-config="{resizable: true}" :row-config="{ useKey: true }" stripe :menu-config="menuConfig" :edit-config="{ autoClear: false }"@menu-click="contextMenuClickEvent"><vxe-column v-for="(item, index) in columnDataHour1" :key="item.value" :field="item.value" show-overflow:edit-render="index === 0 ? null : { autofocus: '.vxe-input--inner' }" :title="item.name":align="index === 0 ? 'center' : 'right'" :width="index === 0 ? 60 : 68":fixed="index === 0 ? 'left' : (index === columnDataHour1.length - 1) ? 'right' : undefined"><template #default="{ row }"><span v-if="edit">{{ row[item.value] }}</span><vxe-input v-else-if="item.name !== '時間'" v-model="row[item.value]" type="float" placeholder="0.00":digits="2" :min="-10" :max="10"></vxe-input><span v-else>{{ row[item.value] }}</span></template></vxe-column></vxe-table><vxe-table ref="tableRefTempUp2" :data="tableDataTempUp" border height="100px" :column-config="{resizable: true}" :row-config="{ useKey: true }" stripe :auto-resize="true" :menu-config="menuConfig":edit-config="{ autoClear: false }" @menu-click="contextMenuClickEvent"><vxe-column v-for="(item, index) in columnDataHour2" :key="item.value" :field="item.value" show-overflow:edit-render="index === 0 ? null : { autofocus: '.vxe-input--inner' }" :title="item.name":align="index === 0 ? 'center' : 'right'" :width="index === 0 ? 60 : 68":fixed="index === 0 ? 'left' : (index === columnDataHour2.length - 1) ? 'right' : undefined"><template #default="{ row }"><span v-if="edit">{{ row[item.value] }}</span><vxe-input v-else-if="item.name !== '時間'" v-model="row[item.value]" type="float" placeholder="0.00":digits="2" :min="-10" :max="10"></vxe-input><span v-else>{{ row[item.value] }}</span></template></vxe-column></vxe-table></div>

<script lang='ts'>
import { reactive, toRefs, computed, watch, onMounted, onUnmounted } from 'vue'
import { getConTimeoffsetData, setConTimeoffsetData, getConTempTrend } from '@/api/RunMonitor/StationMonitor/controlStrategy';
import { ElMessage, ElMessageBox } from 'element-plus'
import moment from 'moment';
import { cloneDeep, sortBy, mean } from 'lodash-es'
import { Echart } from '@/components/Echart'
import { set } from 'lodash-es'
import { scatterChartOption, scatterChartOptionAvg } from './chartOptions.js'export default {components: {Echart,PatrolDialog,},emits: ['onClose'],setup(props, { emit }) {const state = reactive({// refechartsTempUp: null,tableRefTempUp1: null,tableRefTempUp2: null,chartLeftData: scatterChartOption,supTempLine: [],supTempPoint: [],avgTempLine: [],avgTempPoint: [],// datashow: false,edit: true,edit2: true,rowInfo: {}, // 點擊的行數據tableDataTempUp: [],tableDataTempAvg: [],resData: [], // 接口數據tableData: [], // table數據，倒序columnDataHour1: [{ name: '時間', value: 'getTime' },],columnDataHour2: [{ name: '時間', value: 'getTime' },],menuConfig: {className: 'my-menus',body: {options: [[{ code: 'refresh', name: '表格刷新' },// { code: 'exportCurrent', name: '導出當前頁', },]]},},} as any)const columnDataHour1 = computed(() => {for (let i = 0; i < 12; i++) {state.columnDataHour1.push({ name: `${i}時`, value: `h${i}` })}return state.columnDataHour1})const columnDataHour2 = computed(() => {for (let i = 12; i < 24; i++) {state.columnDataHour2.push({ name: `${i}時`, value: `h${i}` })}return state.columnDataHour2})const methods = {async open({ row }) {state.rowInfo = row;methods.getTableData()methods.getChartData()// 打開彈窗state.show = true;},// 編輯editTableTempUp() {state.edit = false;},// 取消編輯clearEditTempUp() {state.edit = true;// let tableData = state.tableRef.getTableData().tableData;let tableData = cloneDeep(state.tableDataTempUp);tableData.forEach(element => {for (let key in element) {if (element[key] === '') {element[key] = '0.00'}else if (key === 'conid') {element[key] = state.rowInfo?.conId} else if (key === 'mode') {element[key] = 0 // 供溫}}});delete tableData[0].getTimedelete tableData[0].getimemethods.setTableData(tableData[0])},// 獲取表格數據getTableData() {getConTimeoffsetData({conid: state.rowInfo?.conId,}).then(res => {if (res && res.data.length > 0) {// state.resData = res.data || [];let tableData = cloneDeep(res.data);tableData.forEach(item => {if (item.mode === 0) {// 0 表示供溫曲線；1表示均溫曲線for (let key in item) {if (!item[key] && item[key] !== 'conid' && item[key] !== 'getime' && item[key] !== 'mode') {item[key] = '0.00';} else {item[key] = Number(item[key]).toFixed(2);}}item.getTime = '偏移'state.tableDataTempUp = [item]} else {for (let key in item) {if (!item[key] && item[key] !== 'conid' && item[key] !== 'getime' && item[key] !== 'mode') {item[key] = '0.00';} else {item[key] = Number(item[key]).toFixed(2);}}item.getTime = '偏移'state.tableDataTempAvg = [item];}});} else {state.tableDataTempUp = [];state.tableDataTempAvg = [];}}).catch(e => {console.log(e)state.tableDataTempUp = [];state.tableDataTempAvg = [];})},// 設置表格數據setTableData(data) {setConTimeoffsetData(data).then(res => {if (res.code === '0') {ElMessage.success(res?.msg)methods.getTableData()} else {ElMessage.error(res?.msg)}}).catch(e => {console.log(e)ElMessage.error(e)})},// 獲取圖表數據getChartData() {getConTempTrend({conid: state.rowInfo?.conId,}).then(res => {if (res && res.data) {state.resData = cloneDeep(res.data);const supTemp = state.resData.supTempLine.concat(state.resData.supTempPoint)let supTempMax = Math.max(...supTemp.map(item => item.y));let supTempMin = Math.min(...supTemp.map(item => item.y));const yAxisSupMin = Math.round(supTempMin * 0.9)const yAxisSupMax = Math.round(supTempMax * 1.1)const seriesSupDataPoint = state.resData.supTempPoint.map(item => [item.x, item.y]);const seriesSupDataLine = state.resData.supTempLine.map(item => [item.x, item.y]);// 供溫set(state.chartLeftData, 'yAxis[0].min', yAxisSupMin)set(state.chartLeftData, 'yAxis[0].max', yAxisSupMax)set(state.chartLeftData, 'series[1]data', seriesSupDataPoint)set(state.chartLeftData, 'series[0]data', seriesSupDataLine)} else {state.resData = [];}}).catch(e => {console.log(e)state.resData = [];})},}return {...toRefs(state),...methods,columnDataHour1,columnDataHour2,}}
}
</script>