table可改变行高列宽，单行新增编辑删除_const editabledata: unwrapref<record<string, datai-CSDN博客

本文链接：https://blog.csdn.net/qzz12345/article/details/131974115

文章详细描述了一个Vue组件assignmentTable.vue，用于显示和编辑多维度的考核指标数据，包括添加、编辑、删除操作，以及与API接口的交互。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

--------------------------------------------------------components
------------------------assignmentTable.vue

const props = defineProps({
addMessageTableData: {
type: Array
},
tableProject: {
type: String,
}
})
const emit = defineEmits([‘delSuccess’])
const scrollY = ref()

interface DataItem {
key: string;
labels: string;
keyIndex: string;
dataMb: string;
dataSj: string;

evtAssessRate: string;
evtMb: string;
evtSj: string;
evtRate: string;
evtZbScore: string;
evtStateScore: string;

dvtAssessRate: string;
dvtMb: string;
dvtSj: string;
dvtRate: string;
dvtZbScore: string;
dvtStateScore: string;

pvtAssessRate: string;
pvtMb: string;
pvtSj: string;
pvtRate: string;
pvtZbScore: string;
pvtStateScore: string;

protoAssessRate: string;
protoMb: string;
protoSj: string;
protoRate: string;
protoZbScore: string;
protoStateScore: string;

}

const columns: TableColumnsType = [
{
title: ‘考核指标’,
children: [
{
title: ‘维度’,
dataIndex: ‘labels’,
key: ‘labels’,
align:“center”,
fixed:“left”,
width: 100,
customCell: (record, index) => {
let arr = props.addMessageTableData.value.filter((res) => {
//这里gpsNumber是我需要判断的字段名（相同就合并）
return res.labels == record.labels;
});
console.log(arr);

      if (index == 0 || props.addMessageTableData.value[index - 1].labels != record.labels) {
        return { rowSpan: arr.length };
      } else {
        return { rowSpan: 0 };
      }
    }
  },
  {
    title: '关键指标',
    dataIndex: 'keyIndex',
    key: 'keyIndex',
    align:"center",
    fixed:"left",
    width: 100,
  },
],

},
{
title: ‘数据提供’,
children: [
{
title: ‘目标值’,
dataIndex: ‘dataMb’,
key: ‘dataMb’,
align:“center”,
width: 100,
},
{
title: ‘实际值’,
dataIndex: ‘dataSj’,
key: ‘dataSj’,
align:“center”,
width: 100,
},
],
},
{
title: ‘PROTO’,
children: [
{
title: ‘考核比重’,
dataIndex: ‘protoAssessRate’,
key: ‘protoAssessRate’,
align:“center”,
width: 100,
},
{
title: ‘目标值’,
dataIndex: ‘protoMb’,
key: ‘protoMb’,
align:“center”,
width: 100,
},
{
title: ‘实际值’,
dataIndex: ‘protoSj’,
key: ‘protoSj’,
align:“center”,
width: 100,
},
{
title: ‘达成率’,
dataIndex: ‘protoRate’,
key: ‘protoRate’,
align:“center”,
width: 100,
},
{
title: ‘指标得分’,
dataIndex: ‘protoZbScore’,
key: ‘protoZbScore’,
align:“center”,
width: 40,
},
{
title: ‘阶段得分’,
dataIndex: ‘protoStateScore’,
key: ‘protoStateScore’,
align:“center”,
width: 40,
},
],
},
{
title: ‘EVT’,
children: [
{
title: ‘考核比重’,
dataIndex: ‘evtAssessRate’,
key: ‘evtAssessRate’,
align:“center”,
width: 100,
},
{
title: ‘目标值’,
dataIndex: ‘evtMb’,
key: ‘evtMb’,
align:“center”,
width: 100,
},
{
title: ‘实际值’,
dataIndex: ‘evtSj’,
key: ‘evtSj’,
align:“center”,
width: 100,
},
{
title: ‘达成率’,
dataIndex: ‘evtRate’,
key: ‘evtRate’,
align:“center”,
width: 100,
},
{
title: ‘指标得分’,
dataIndex: ‘evtZbScore’,
key: ‘evtZbScore’,
align:“center”,
width: 40,
},
{
title: ‘阶段得分’,
dataIndex: ‘evtStateScore’,
key: ‘evtStateScore’,
align:“center”,
width: 40,
},
],
},
{
title: ‘DVT’,
children: [
{
title: ‘考核比重’,
dataIndex: ‘dvtAssessRate’,
key: ‘dvtAssessRate’,
align:“center”,
width: 100,
},
{
title: ‘目标值’,
dataIndex: ‘dvtMb’,
key: ‘dvtMb’,
align:“center”,
width: 100,
},
{
title: ‘实际值’,
dataIndex: ‘dvtSj’,
key: ‘dvtSj’,
align:“center”,
width: 100,
},
{
title: ‘达成率’,
dataIndex: ‘dvtRate’,
key: ‘dvtRate’,
align:“center”,
width: 100,
},
{
title: ‘指标得分’,
dataIndex: ‘dvtZbScore’,
key: ‘dvtZbScore’,
align:“center”,
width: 40,
},
{
title: ‘阶段得分’,
dataIndex: ‘dvtStateScore’,
key: ‘dvtStateScore’,
align:“center”,
width: 40,
},
],
},
{
title: ‘PVT’,
children: [
{
title: ‘考核比重’,
dataIndex: ‘pvtAssessRate’,
key: ‘pvtAssessRate’,
align:“center”,
width: 100,
},
{
title: ‘目标值’,
dataIndex: ‘pvtMb’,
key: ‘pvtMb’,
align:“center”,
width: 100,
},
{
title: ‘实际值’,
dataIndex: ‘pvtSj’,
key: ‘pvtSj’,
align:“center”,
width: 100,
},
{
title: ‘达成率’,
dataIndex: ‘pvtRate’,
key: ‘pvtRate’,
align:“center”,
width: 100,
},
{
title: ‘指标得分’,
dataIndex: ‘pvtZbScore’,
key: ‘pvtZbScore’,
align:“center”,
width: 40,
},
{
title: ‘阶段得分’,
dataIndex: ‘pvtStateScore’,
key: ‘pvtStateScore’,
align:“center”,
width: 40,
},
],
},
{
title: ‘操作’,
dataIndex: ‘operation’,
align:“center”,
width: 100,
fixed: ‘right’,
},

];
const editableData: UnwrapRef<Record<string, DataItem>> = reactive({});

const edit = (key: string) => {
editableData[key] = cloneDeep(props.addMessageTableData.value.filter(item => key === item.key)[0]);
};

const onDelete = async(key: string) => {
// props.addMessageTableData.value = props.addMessageTableData.value.filter(item => item.key !== key);
Object.assign(props.addMessageTableData.value.filter(item => key === item.key)[0], editableData[key]);
const params = {
addMessageTableData: toRaw(props.addMessageTableData.value.filter(item => key === item.key)[0])
}
await assignMeessageDele(params);
emit(‘delSuccess’)
};
const handleAdd = () => {
const newData = {
key: Math.random(),
labels: ‘’,
keyIndex: ‘’,
dataMb: ‘’,
dataSj: ‘’,

evtAssessRate: '',
evtMb: '',
evtSj: '',
evtRate: '',
evtZbScore: '',
evtStateScore: '',

dvtAssessRate: '',
dvtMb: '',
dvtSj: '',
dvtRate: '',
dvtZbScore: '',
dvtStateScore: '',

pvtAssessRate: '',
pvtMb: '',
pvtSj: '',
pvtRate: '',
pvtZbScore: '',
pvtStateScore: '',

protoAssessRate: '',
protoMb: '',
protoSj: '',
protoRate: '',
protoZbScore: '',
protoStateScore: '',

};
props.addMessageTableData.value.push(newData);
};

onBeforeMount(() => {
if (window.innerWidth < 1400) {
scrollY.value = 240
} else if (window.innerWidth < 1850) {
scrollY.value = 480
} else {
scrollY.value = 600
}

addEventListener(‘resize’, () => {
if (window.innerWidth < 1400) {
scrollY.value = 240
} else if (window.innerWidth < 1850) {
scrollY.value = 480
} else {
scrollY.value = 600
}
})
})

/:deep(thead .ant-table-cell) {/
/* padding: 0 !important;/
/ min-height: 60px;/
/ !* padding: 4 0; !/
/}/

/:deep(.ant-table-cell-fix-left) {/
/* z-index: 19;/
/}*/
:deep(.ant-table-thead > tr > th) {
border-right: 1px solid #000000 !important;
border-left: 1px solid #000000 !important;
border-bottom: 1px solid #000000 !important;
border-top: 1px solid #000000 !important;
padding: 8px 0 !important;
font-weight: bolder !important;
}

:deep(.ant-table-tbody > tr > td) {
border-bottom: 1px solid #000000 !important;
border-right: 1px solid #000000 !important;
border-left: 1px solid #000000 !important;
padding: 0px !important;
}

----------------------------------------------assignment.api.ts
import { defHttp } from ‘/@/utils/http/axios’

enum Api {
uPmoJxrwProject = ‘/intelligentoffice/pmoSelectList/getuPmoJxrwProject’,
assignMeessageSave = ‘/intelligentoffice/uPmo/assignment/assignMeessageSave’,
assignMeessageDele = ‘/intelligentoffice/uPmo/assignment/assignMeessageDele’,
importExcel = ‘/intelligentoffice/uPmo/assignment/importExcel’,
list = ‘/intelligentoffice/uPmo/assignment/list’,
changeProjectList = ‘/intelligentoffice/uPmo/assignmentBg/list’,
}

export const uPmoBuAndProject = () => defHttp.get({ url: Api.uPmoJxrwProject },{isTransformResponse: false})
export const assignMeessageSave = (params) => defHttp.post({ url: Api.assignMeessageSave, params })
export const assignMeessageDele = (params) => defHttp.post({ url: Api.assignMeessageDele, params })
export const importExcel = (params) => defHttp.post({ url: Api.importExcel, params })
export const list = (params) => defHttp.get({ url: Api.list,params })
export const changeProjectList = (params) => defHttp.get({ url: Api.changeProjectList,params })

------------------------------------------------------assignment.vue

<a-select
show-search
style=“width: 180px; margin-right: 40px”
v-model:value=“project”
placeholder=“Select Item…”
:max-tag-count=“1”
@change=“handleChange”>
{{ value }}

导入

<a-button @click=“uploadMuban” type=“primary” preIcon=“ant-design:export-outlined” style=“margin-right: 15px;”>模板下载

    <a-button type="primary" preIcon="ant-design:export-outlined" style="margin-right: 15px;" :load="confirmLoding" @click="exportXlsx"> 导出数据</a-button>
    <a-button type="primary" preIcon="ant-design:export-outlined" @click="changeData"> 变更履历</a-button>
  </div>
</div>
<div class="box-content">
  <assignmentTable :addMessageTableData="addMessageTableData" :tableProject="project" @delSuccess="handleChange"/>
</div>
<assignmentBgList :visible="visible" :changeProject="project" @closeModal="visible = false"/>

-----------------------------------------------assignmentBgList.vue

<a-modal :visible=“props.visible” width=“80%” title=“详情” @cancel=“closeModal” @ok=“closeModal” centered>

<a-table :columns="columns" :data-source="tableData" :bordered="true" :pagination="false" :scroll="{ y: scrollY }"></a-table>