a-table單元格指定合并以及表格雙擊編輯以及未填寫指定驗證功能

一、 a-table單元格指定合并

1. a-table

				<a-tableref="table":pagination="{position: ['none']}":columns="columns":dataSource="tableData":alert="false":row-key="(record) => record.id"bordered></a-table>

2. columns

columns.value = [{title: '序號',dataIndex: 'index',align: 'center',width: '300px',customRender: function ({ text, record, index }) {if (record.objectName === '單元測評結果（符合/部分符合/不符合/不適用）') {return record.objectName} else {return index + 1}},customCell: (data, index) => {if (data.objectName === '單元測評結果（符合/部分符合/不符合/不適用）') {return {colSpan: 2}} else {return { colSpan: 1 }}}},{title: '測評對象',dataIndex: 'objectName',align: 'center',width: '300px',customCell: (data, index) => {if (data.objectName === '單元測評結果（符合/部分符合/不符合/不適用）') {return {colSpan: 0}} else {return { colSpan: 1 }}}},{title: '測評指標符合情況(符合/部分符合/不符合/不適用)',dataIndex: 'content1',align: 'center',width: '300px',children: [{title: '身份鑒別',dataIndex: '9',align: 'center',width: '300px'},{title: '遠程管理通道安全',dataIndex: '10',align: 'center',width: '300px'},{title: '系統資源訪問控制信息完整性',dataIndex: '11',align: 'center',width: '300px'},{title: '重要信息資源安全標記完整性',dataIndex: '12',align: 'center',width: '300px'},{title: '日志記錄完整性',dataIndex: '13',align: 'center',width: '300px'},{title: '重要可執行程序完整性、重要可執行程序來源真實性',dataIndex: '14',align: 'center',width: '300px'}]}]

3. 圖例

二、a-table 表格雙擊編輯以及未填寫驗證

1. a-table

		<a-tablestyle="width: 100%"bordered:dataSource="tableData"ref="selection":pagination="false":columns="columns":customRow="Rowclick":row-key="(record) => record.evaluationEnvironmentId":class="{ 'no-hover': disableHover }"><template #bodyCell="{ column, index, record }"><template v-if="column.key === 'handle'"><a-space><a-button type="primary" danger @click="onDelete(record, index)" :disabled="isReview"> 刪除 </a-button><a-buttontype="primary"@click="getModifications(record, index)":disabled="isReview"v-if="record.checkState == '0' || !record.checkState"style="background: rgb(183 175 175); border: none">后續修改</a-button><a-buttontype="primary"@click="getModifications(record, index)":disabled="isReview"v-if="record.checkState == '1'"style="background: #f88f5e; border: none">后續修改<CloseCircleFilled /></a-button></a-space></template></template></a-table>

2. js

子組件內容

//雙擊編輯

const Rowclick = (columns, index, record) => {return {onClick: (event) => {if (!isReview) {//isReview為驗證在什么條件下可以編輯/不可以編輯if (currentRowIndex.value != undefined) {if (currentRowIndex.value != index) {lastRowIndex.value = currentRowIndex.value}}currentRowIndex.value = indexconst cellElement = event.target.closest('td')if (cellElement) {currentColumnIndex.value = cellElement.cellIndex}}},onDblclick: (event) => {console.log(isReview,'isReview')if (!isReview) {if (lastRowIndex.value != undefined) {if (lastRowIndex.value != index) {if (cloneDataList.value[index]) {cloneDataList.value[index].editting = {}}}}const cellElement = event.target.closest('td')const dataIndex = props.columns[cellElement.cellIndex].keycloneDataList.value[index].editting = {}cloneDataList.value[index].editting[dataIndex] = truepasteStatus.value = false}}}}

//可以復制

const pasteInfo = (e) => {if (!isReview) {try {if (pasteStatus.value) {//獲得粘貼的文字var data = nullvar clipboardData = e.clipboardData // IEif (!clipboardData) {//chromeclipboardData = e.originalEvent.clipboardData}data = clipboardData.getData('Text')var rowStrArray = data.split('\n')rowsInfo.value = []for (var i = 0; i < rowStrArray.length - 1; i++) {var row = []var tdStrArray = rowStrArray[i].split('\t')for (var j = 0; j < tdStrArray.length; j++) {row.push(tdStrArray[j].replace('\r', ''))}rowsInfo.value.push(row)}let tableLength = props.tableData.lengthfor (var j = 0; j < rowsInfo.value.length; j++) {if (currentRowIndex.value + j >= tableLength) {addLine()}temp.value = JSON.parse(JSON.stringify(props.tableData[currentRowIndex.value + j]))let num = 0let numFlag = 0for (var key in props.emptyObj) {if (!rowsInfo.value[j][num]) {break}if (currentColumnIndex.value - 2 <= numFlag) {temp.value[key] = rowsInfo.value[j][num]if (temp.value.cellClassName && temp.value.cellClassName[key]) {delete temp.value.cellClassName[key]}num = num + 1}numFlag = numFlag + 1}// this.$set(tableData.value, currentRowIndex.value+j, temp.value)props.tableData[currentRowIndex.value + j] = temp.value}window.localStorage.setItem('editTableLength', props.tableData.length)cloneDataList.value = JSON.parse(JSON.stringify(props.tableData)).map((item) => {item.editting = falsereturn item})}} catch (err) {message.error({content: '請選擇復制位置'})}}}

//獲取tableData

	const init = () => {cloneDataList.value = JSON.parse(JSON.stringify(props.tableData)).map((item, index) => {item.editting = falsereturn item})props.columns.forEach((item, index) => {// if (item.editable) {// $set(item, 'renderHeader', (h, params) => {// return h('div', [h('span', {//   domProps: {//     innerHTML: item.title//   },// }),// ])// });// }//如果含有editable屬性并且為trueif (item.editable) {item.customRender = function ({ text, record, index, column }) {var currentRow = cloneDataList.value[index]if (!currentRow.editting[item.key]) {if (item.date) {return h('span', currentRow[item.key])}// 下拉類型中value與label不一致時單獨渲染if (item.option) {// 我這里為了簡單的判斷了第一個元素為object的情況,其實最好用every來判斷所有元素if (typeof item.option[0] === 'object') {if (item.multiple) {let arr1 = [],arrif (typeof currentRow[item.key] == 'string' && currentRow[item.key])arr = currentRow[item.key].split(',')else arr = currentRow[item.key]arr &&arr.length > 0 &&arr.forEach((optionItem) => {// arr1.push(item.option.find(findObjectInOption(optionItem)).label)arr1.push(item.option.find(findObjectInOption(optionItem))? item.option.find(findObjectInOption(optionItem)).label: optionItem)})return h('span', {}, arr1.join())} else {// let params = item.option.find(findObjectInOption(currentRow[item.key])) ? item.option.find(findObjectInOption(currentRow[item.key])).label : '請選擇'let params = item.option.find(findObjectInOption(currentRow[item.key]))? item.option.find(findObjectInOption(currentRow[item.key])).label: currentRow[item.key]return h('span', {}, params)}}}return h('span', currentRow[item.key])} else {if (item.option) {//  && typeof currentRow[column.key] == 'string'if (item.multiple) {// let arr = currentRow[column.key].split(',')let arr = currentRow[column.key]if (arr == '請選擇') {arr = undefined}return h(Select, {placeholder: '請選擇',value: arr,options: item.option,mode: 'multiple',style: { width: '100%' },onChange: (value) => {// if(!value){//   currentRow[column.key] ='請選擇'// }else{//   currentRow[column.key] = value// }currentRow[column.key] = valuesaveData(currentRow, index, column.key, value)},onClear: function () {}})} else {return h(Select, {placeholder: '請選擇',value: currentRow[column.key],options: item.option,style: { width: '100%' },onChange: (value) => {if (value.length == 0) {currentRow[column.key] = '請選擇'} else {currentRow[column.key] = value}saveData(currentRow, index, column.key, value)}})}} else if (item.date) {//如果含有date屬性return h('DatePicker', {props: {type: item.date.split('_')[0] || 'date',clearable: false,value: currentRow[params.column.key]},on: {'on-change': function (value) {self.$set(currentRow, params.column.key, value)}}})} else {return h(Input, {placeholder: '請輸入',// value: currentRow[column.key] = '未填寫'? undefined:currentRow[column.key],value: currentRow[column.key],onChange: (event) => {currentRow[column.key] = event.target.valuesaveData(currentRow, index, column.key, event.target.value)},onBlur: (event) => {cloneDataList.value[index].editting = {}if (event.target.value == '') {currentRow[column.key] = '未填寫'}saveData(currentRow, index, column.key, event.target.value)}})}}}} else {if (item.key == 'orderNum') {item.customRender = function ({ text, record, index }) {return index + 1}}}// 使用$set 可以觸發視圖更新// 如果含有titleHtml屬性 將其值填入表頭if (item.children) {item.children.forEach((child) => {if (child.editable) {child.render = function (h, params) {var currentRow = self.cloneDataList[params.index]// 非編輯狀態if (!currentRow.editting) {// 日期類型單獨 渲染(利用工具暴力的formatDate格式化日期)if (child.date) {// return h('span', self.utils.formatDate(currentRow[item.key], item.date.split('_')[1]))return h('span', currentRow[child.key])}// 下拉類型中value與label不一致時單獨渲染if (child.option) {// 我這里為了簡單的判斷了第一個元素為object的情況,其實最好用every來判斷所有元素if (typeof child.option[0] === 'object') {let params = child.option.find(findObjectInOption(currentRow[child.key]))? child.option.find(findObjectInOption(currentRow[child.key])).label: currentRow[child.key]return h('span', {}, params)}}return h('span', currentRow[child.key])} else {// 編輯狀態//如果含有option屬性if (child.option) {return h('Select',{props: {// ***重點***:  這里要寫currentRow[params.column.key],綁定的是cloneDataList里的數據value: currentRow[params.column.key],transfer: true,filterable: true},on: {'on-change': function (value) {self.$set(currentRow, params.column.key, value)}}},child.option.map(function (child) {return h('Option',{props: {value: child.value,label: child.label}},child.label)}))} else if (child.date) {//如果含有date屬性return h('DatePicker', {props: {type: child.date.split('_')[0] || 'date',clearable: false,value: currentRow[params.column.key]},on: {'on-change': function (value) {self.$set(currentRow, params.column.key, value)}}})} else {return h('input', {props: {// type類型也是自定的屬性type: child.input || 'text',// rows只有在input 為textarea時才會起作用rows: 3,// disabled: (params.row.type == '1' || params.row.type == '2') && (child.key == 'evaluationtDocumentsName' || child.key == 'content') ? true : false,value: currentRow[params.column.key],placeholder: child.placeholder ? item.placeholder : ''},on: {'on-change'(event) {self.$set(currentRow, params.column.key, event.target.value)}}})}}}}})}})}

中間組件
//editTable

		<editTable:emptyObj="emptyObj":columns="columns"ref="editTables":tableData="tableData":reviewShow="reviewShow"v-if="refresh_2"></editTable>

//消息保存驗證

	const getFormData = async () => {let flag = falsesubDataList.value = []let saveFlag = true// 創建一個 Promise 數組來處理異步操作const promises = []tableData.value.forEach((item, index) => {//判斷多出來的一行保存的時候不保存最后一行if (tableData.value.length - 1 == index && JSON.stringify(item) == JSON.stringify(emptyObj.value)) {console.log('空白行')} else {item.cellClassName = {};item.evaluationId = route.query.evaluationIditem.evaluationInformationId = route.query.evaluationInformationIdfor (var key in item) {if (emptyObj.value.hasOwnProperty(key)) {if ((item[key] === '' || item[key] === '未填寫' || item[key] === '請選擇') && key != 'remark') {item.cellClassName[key] = 'demo-table-info-cell-name'columns.value.forEach((item_1, index_1) => {if (item_1.key == key)columns.value[index_1].customCell = (record, rowIndex) => {return {class:record[item_1.key] == '請選擇' || record[item_1.key] == '未填寫'? 'demo-table-info-cell-name': ''}}})}// 重要程度if (key === 'levels') {let levelsFlag = falsefor (var i = 0; i < columns.value[3].option.length; i++) {if (columns.value[3].option[i].label == item[key] || columns.value[3].option[i].value == item[key]) {item[key] = columns.value[3].option[i].valuelevelsFlag = truebreak}}if (!levelsFlag) {columns.value.forEach((item_1, index_1) => {if (item_1.option) {columns.value[index_1].customCell = (record, rowIndex) => {// 遍歷 item_1.option 數組的每一項for (let i = 0; i < item_1.option.length; i++) {const currentOption = item_1.option[i]// 檢查條件并返回相應的 classif (record.levels == currentOption.label || record.levels == currentOption.value) {levelsFlag = trueitem[key] = currentOption.valuereturn {class: ''}}}// 如果沒有匹配項，返回默認的 classreturn { class: 'demo-table-info-cell-name' }}}})saveFlag = false}}}}if (Object.keys(item.cellClassName).length == 0) {delete item.cellClassNamelet processData = JSON.parse(JSON.stringify(item))subDataList.value.push(processData)} else {saveFlag = false}}})console.log(saveFlag, 'saveFlag3')if (!saveFlag) {editTables.value.init()} else {subDataList.value.push(...store.state.isopreservation.deleteList)store.commit('resetDeleteList')const res = await bizEnvironmentApi.saveEnvironmentList(subDataList.value)if (res == null) {flag = true}}return flag}

父組件

//調用中間組件方法
let flag = await researchSysForms.value.getFormData() 

3. 圖例