ElementUI table+dialog實現一個簡單的可編輯的表格

table組件如何實現可編輯呢？

我的需求是把table組件那樣的表格，實現它點擊可以彈出一個框，然后在這個框里面輸入你的東西，然后將他回顯回去，當然，輸入的有可能是時間啥的。

為什么要彈出彈層不在框上直接編輯呢？因為框太小了，用戶可能看不見輸入的是啥。

我們可以利用element組件的插槽，獲取數值，然后回顯到表格里。

HTML部分

我用了一個彈層來寫這個功能，如果測試效果，可以直接在主頁面引入，將彈層的控制開關改為true。

<template><el-drawer v-model="drawerVisible" size="calc(100% - 210px)" @close="resetForm"><el-container><el-form ref="ruleFormRef2" label-position="right" :model="form" label-width="138px"><div class="form-left"><div class="sepcial_about"><div class="tableForm"><el-table :data="testDatas" border style="width: 700px"><el-table-column v-for="(col, idx) in columnList" :key="col.prop" :index="idx" :width="idx === 1 ? '180px' : ''"><template #header><p>{{ col.label }}</p></template><template #default="{ row }"><p :class="col.prop == 'remark' ? 'p_remark' : 'p1111'" @click="e => handleEdit(0, row, col)">{{ col.prop == "time" ? changeTime(row[col.prop]) : row[col.prop] }}</p></template></el-table-column><el-table-column width="120"><template #header><p class="p_specail">操作</p></template><template #default="scope"><p class="p1111"><el-button link type="primary" size="large" @click.prevent="delRow(scope, 0)">刪除</el-button></p></template></el-table-column></el-table><el-button type="primary" class="mt-4" style="width: 100%" @click="addRow(0)">新增</el-button></div></div></div></el-form><el-dialog v-model="dialogVisible" title="添加" width="30%" center align-center><span>{{ sureMsg }}</span><template #footer><span class="dialog-footer"><el-button type="primary" @click="toSure">確 認</el-button></span></template></el-dialog><el-dialog v-model="addDialog" :title="addTitle" width="30%" center align-center><el-date-picker v-if="isTime" v-model="addinput" type="daterange" format="YYYY/MM/DD" value-format="YYYY-MM-DD" /><el-inputv-if="isNum"resize="none"maxlength="15"show-word-limitv-model="addinput"type="textarea"size="large"placeholder="請輸入"/><el-inputv-if="!isNum && !isTime"resize="none"maxlength="500"show-word-limitv-model="addinput"type="textarea"size="large"placeholder="請輸入"/><template #footer><span class="dialog-footer"><el-button type="primary" @click="sava">保存</el-button></span></template></el-dialog></el-container></el-drawer>
</template>

JS

1.渲染數據集合

自定義的表頭，HTML結構中通過v-for 循環表頭列表，進行label的取值來構建最基礎的表格

// 表格之中的數據
const testDatas: any = ref([]);// 表頭列表
const columnList: any = ref([{ prop: "projectName", label: "測試1" },{ prop: "time", label: "時間段" },{ prop: "projectContentSummary", label: "測試2" }
]);

2.handleEdit函數

這個函數主要是用來控制彈層的彈出，通過行的標簽名字判斷需要什么輸入的值。根據whatSava的值來判斷你點擊的是哪個表格，這個參數在HTML結構寫死，cellRow和cellCol就是在渲染的時候帶入的行的值和列的值。可以獲得標簽名字或者prop字段用來做判斷。當然，這些名字也可以用來設置彈出彈框的彈框名字。

然后判斷prop的值來看是不是需要輸入或者是時間段格式的，讓各自的開關變為true或者false

并且根據cellRow[cellCol.prop]這個值來對彈出來的框進行賦值，也就是回顯。

const addinput = ref("");
const addTitle = ref("");
const addCode = ref();
const addProp = ref();
const isTime = ref(false);
const savaWhat = ref();
const isNum = ref(false);
const handleEdit = (whatSava: any, cellRow: any, cellCol: any) => {if (whatSava == "0") {savaWhat.value = 0;}if (cellCol.prop == "ceshi1" || cellCol.prop == "ceshi2") {isTime.value = false;if (cellCol.prop == "ceshi2") {isNum.value = true;} else {isNum.value = false;}addTitle.value = cellCol.label;addProp.value = cellCol.prop;addCode.value = cellRow.index;addinput.value = cellRow[cellCol.prop];addDialog.value = true;} else {isTime.value = true;addTitle.value = cellCol.label;addProp.value = cellCol.prop;addCode.value = cellRow.index;addinput.value = cellRow[cellCol.prop];addDialog.value = true;}
};

3.保存彈框函數

這個函數就是彈出層的保存函數，先找到你點擊的是哪個框，然后把彈框里面輸入的東西賦值給他，如果是數字的話，就用正則限制一下，不讓他輸入數字以外的東西。最后要清空一下，防止下次回顯。

const sava = () => {let idx = testDatas.value.findIndex((p: any) => p.index == addCode.value);if (addProp.value == "ceshi2") {if (!/^[0-9]*$/.test(addinput.value)) {ElMessage.warning("請輸入數字");return;}testDatas.value[idx][addProp.value] = addinput.value;} else {testDatas.value[idx][addProp.value] = addinput.value;}addinput.value = "";addDialog.value = false;
};

4.清洗時間格式函數

因為我們日期時間選擇器，得到的是一個數組，所以我們回顯的時候，應該拿數組的第一項和第二項，然后拼接起來，得到我們回顯的正確格式。

//時間格式清洗
const changeTime = (data: any) => {if (!data) {return "";} else {let data1 = data[0] + "~" + data[1];return data1;}
};

5.添加函數

只需要我們知道添加的是哪個表格的，單表格就可以忽略whatAdd這個參數。

邏輯就是先判斷他是不是為空，為空的話給他單純的加一行，不為空的話，得到數組的長度，給他加一個index，我在寫的過程中，發現我們沒有辦法獲得一個標識，所以我寫了一個index來當作唯一標識，當然，這個在獲取后端接口的時候，需要你獲取后端給你數組的長度，然后再依次相加就不會導致錯誤的出現。

// 添加一行
const addRow = (whatAdd: number) => {if (whatAdd == 0) {let obj: any = {};if (testDatas.value.length == 0) {obj.index = "0";columnList.value.forEach((p: any) => {obj[p.prop] = "";});testDatas.value[0] = obj;} else {const weiyi = testDatas.value[testDatas.value.length - 1].index;columnList.value.forEach((p: any) => {obj[p.prop] = "";});obj.index = String(Number(weiyi) + 1);testDatas.value[testDatas.value.length] = obj;}}
};

6.刪除函數

因為刪除標簽在table表格之中，所以我們可以用scope準確的獲得是哪一行，然后用whatDel判斷你刪除的是哪個表格。

//刪除
const delRow = (scope: any, whatDel: number) => {const arrIndex = scope.$index; //唯一標識//將testDatas中的第arrIndex項數據刪除if (whatDel == 0) {testDatas.value.splice(arrIndex, 1);}
};

CSS

<style scoped lang="scss">
:deep(.el-textarea__inner) {height: 200px;
}
:deep(.cell) {text-align: center !important;height: 45px;padding: 0;
}
.p1111 {height: 50px;line-height: 50px !important;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;padding: 0;margin: 0;text-align: center !important;
}.tableForm {width: 700px;margin-left: 35px;margin-top: 20px;
}
.sepcial_about {width: 500px;padding-left: 40px;box-sizing: border-box;margin-bottom: 60px;position: relative;> :first-child {width: 1000px;margin-bottom: 10px;}
}
.sepcial_about .mt-4 {position: absolute;width: 40px !important;height: 30px !important;bottom: 10px;left: 800px;z-index: 999;
}
.sepcial_about :deep(.el-table) {display: block;height: 100%;
}
:deep(.el-date-editor) {width: 100% !important;height: 50px;text-align: center;
}.form-left {padding-top: 20px;
}:deep(.el-form-item__content) {/* margin-top: 20px; */margin-left: 40px !important;
}:deep(.el-form-item__label) {font-size: 16px;color: black;
}
</style>

?全部代碼

<template><el-drawer v-model="drawerVisible" size="calc(100% - 210px)" @close="resetForm"><el-container><el-form ref="ruleFormRef2" label-position="right" :model="form" label-width="138px"><div class="form-left"><div class="sepcial_about"><div class="tableForm"><el-table :data="testDatas" border style="width: 700px"><el-table-column v-for="(col, idx) in columnList" :key="col.prop" :index="idx" :width="idx === 1 ? '180px' : ''"><template #header><p>{{ col.label }}</p></template><template #default="{ row }"><p :class="col.prop == 'remark' ? 'p_remark' : 'p1111'" @click="e => handleEdit(0, row, col)">{{ col.prop == "time" ? changeTime(row[col.prop]) : row[col.prop] }}</p></template></el-table-column><el-table-column width="120"><template #header><p class="p_specail">操作</p></template><template #default="scope"><p class="p1111"><el-button link type="primary" size="large" @click.prevent="delRow(scope, 0)">刪除</el-button></p></template></el-table-column></el-table><el-button type="primary" class="mt-4" style="width: 100%" @click="addRow(0)">新增</el-button></div></div></div></el-form><el-dialog v-model="addDialog" :title="addTitle" width="30%" center align-center><el-date-picker v-if="isTime" v-model="addinput" type="daterange" format="YYYY/MM/DD" value-format="YYYY-MM-DD" /><el-inputv-if="isNum"resize="none"maxlength="15"show-word-limitv-model="addinput"type="textarea"size="large"placeholder="請輸入"/><el-inputv-if="!isNum && !isTime"resize="none"maxlength="500"show-word-limitv-model="addinput"type="textarea"size="large"placeholder="請輸入"/><template #footer><span class="dialog-footer"><el-button type="primary" @click="sava">保存</el-button></span></template></el-dialog></el-container></el-drawer>
</template><script setup lang="tsx" name="addConfig">
import { ref, reactive } from "vue";
import { ElMessage } from "element-plus";
const drawerVisible = ref(false);
const addDialog = ref(false);
const addinput = ref("");
const testDatas: any = ref([]);
const columnList: any = ref([{ prop: "ceshi1", label: "測試1" },{ prop: "time", label: "時間段" },{ prop: "ceshi2", label: "測試2" }
]);
const addTitle = ref("");
const addCode = ref();
const addProp = ref();
const isTime = ref(false);
const savaWhat = ref();
const isNum = ref(false);
const handleEdit = (whatSava: any, cellRow: any, cellCol: any) => {if (whatSava == "0") {savaWhat.value = 0;}if (cellCol.prop == "ceshi1" || cellCol.prop == "ceshi2") {isTime.value = false;if (cellCol.prop == "ceshi2") {isNum.value = true;} else {isNum.value = false;}addTitle.value = cellCol.label;addProp.value = cellCol.prop;addCode.value = cellRow.index;addinput.value = cellRow[cellCol.prop];addDialog.value = true;} else {isTime.value = true;addTitle.value = cellCol.label;addProp.value = cellCol.prop;addCode.value = cellRow.index;addinput.value = cellRow[cellCol.prop];addDialog.value = true;}
};
const sava = () => {let idx = testDatas.value.findIndex((p: any) => p.index == addCode.value);if (addProp.value == "ceshi2") {if (!/^[0-9]*$/.test(addinput.value)) {ElMessage.warning("請輸入數字");return;}testDatas.value[idx][addProp.value] = addinput.value;} else {testDatas.value[idx][addProp.value] = addinput.value;}addinput.value = "";addDialog.value = false;
};
let form: any = reactive({});
//時間格式清洗
const changeTime = (data: any) => {if (!data) {return "";} else {let data1 = data[0] + "~" + data[1];return data1;}
};
//清空數據
const resetForm = () => {form.companyName = "";form.linkman = "";form.companyType = "";form.contactTitle = "";form.contactPhone = "";form.id1 = [];form.id2 = [];form.idCardPhoto = [];form.publicCreditInformationReportOfEnterpriseInstitutions = [];form.businessLicenseOrLegalRepresentativeCertificate = [];form.lastYearBankCertificationDocuments = [];form.taxPaymentMaterialsForThePastYear = [];form.employeePaymentCertificateForThePastYear = [];form.declarationOfMajorIllegalRecords = [];form.representativeProjects = [];form.actualImplementationSituation = [];form.other = [];testDatas.value = [];
};
// 添加一行
const addRow = (whatAdd: number) => {if (whatAdd == 0) {let obj: any = {};if (testDatas.value.length == 0) {obj.index = "0";columnList.value.forEach((p: any) => {obj[p.prop] = "";});testDatas.value[0] = obj;} else {const weiyi = testDatas.value[testDatas.value.length - 1].index;columnList.value.forEach((p: any) => {obj[p.prop] = "";});obj.index = String(Number(weiyi) + 1);testDatas.value[testDatas.value.length] = obj;}}
};
//刪除
const delRow = (scope: any, whatDel: number) => {const arrIndex = scope.$index; //唯一標識//將testDatas中的第arrIndex項數據刪除if (whatDel == 0) {testDatas.value.splice(arrIndex, 1);}
};
const acceptParams = () => {drawerVisible.value = true;
};
defineExpose({acceptParams
});
</script><style scoped lang="scss">
:deep(.el-textarea__inner) {height: 200px;
}
:deep(.cell) {text-align: center !important;height: 45px;padding: 0;
}
.p1111 {height: 50px;line-height: 50px !important;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;padding: 0;margin: 0;text-align: center !important;
}
.tableForm {width: 700px;margin-left: 35px;margin-top: 20px;
}
.sepcial_about {width: 500px;padding-left: 40px;box-sizing: border-box;margin-bottom: 60px;position: relative;> :first-child {width: 1000px;margin-bottom: 10px;}
}
.sepcial_about .mt-4 {position: absolute;width: 40px !important;height: 30px !important;bottom: 10px;left: 800px;z-index: 999;
}
.sepcial_about :deep(.el-table) {display: block;height: 100%;
}
:deep(.el-date-editor) {width: 100% !important;height: 50px;text-align: center;
}
.form-left {padding-top: 20px;
}
:deep(.el-form-item__content) {/* margin-top: 20px; */margin-left: 40px !important;
}
:deep(.el-form-item__label) {font-size: 16px;color: black;
}
</style>