此功能是基于antdesgin表格組件可編輯單元格功能修改來(lái)實(shí)現(xiàn)，可查看原文檔：帶單元格編輯功能的表格

具體思路就是在element ui plus 或者 antdesgin 表格組件的單元格插槽中進(jìn)行修改，放入“editable-cell”這個(gè)div就行；

此方法不僅適用于表格，相關(guān)需要自定義編輯的功能都可用此方法，核心就是自行調(diào)整“editable-cell”下的內(nèi)容。

代碼以及注釋如下：

/*插槽內(nèi)修改*/
<Table :columns="tableHeader" :data-source="tableData">
  <template #bodyCell="{ column: {dataIndex},index, text, record }">
      /*編輯主體*/
      <div class="editable-cell">
         /*如果editableData中存在這個(gè)要編輯的屬性，則顯示input編輯彈框*/
         <div v-if="editableData[record[dataIndex as string]+''+index]" class="editable-cell-input-wrapper">
            /*input綁定的值為editableData要編輯的屬性（key）對(duì)應(yīng)的值，以此來(lái)編輯*/
            <Input v-model:value="editableData[record[dataIndex as string]+''+index]"
                   @pressEnter="save(record[dataIndex as string]+''+index,dataIndex as string)"/>
            <icon class="editable-cell-icon-check"
                     @click="save(record[dataIndex as string]+''+index,dataIndex as string)">
                <Check/>
            </icon>
         </div>
         /*否則，顯示edit圖標(biāo)*/
         <div v-else class="editable-cell-text-wrapper">
             /*通過(guò)checkCanBeEdit方法來(lái)判斷這個(gè)單元格是否可編輯（顯示編輯圖標(biāo)）*/
             <icon class="editable-cell-icon"
                      v-if="checkCanBeEdit(dataIndex as string)"
                      @click="edit(record,record[dataIndex as string]+''+index,dataIndex as string)">
                <Edit/>
             </icon>
         </div>
      </div>
  </template>
</Table>

ts：

tableData：表格數(shù)據(jù)  
tableHeader：表格頭

/**
 * 將正在編輯的數(shù)據(jù)以key-value形式保存到editableData對(duì)象中，每個(gè)數(shù)據(jù)都賦予唯一的key（根據(jù)實(shí)際調(diào)整）
 * 編輯完成后（保存后都會(huì)更新最新的table數(shù)據(jù)） 將保存的key刪除
 * 通過(guò)editableData中的正在編輯的屬性有多少來(lái)顯示input組件，否則顯示編輯圖標(biāo)
 */
const editableData: UnwrapRef<Record<string, any>> = reactive({});

/**
 * 編輯框顯示 （傳入的參數(shù)可自行調(diào)整，只要能找到當(dāng)前要修改的數(shù)據(jù)就行）
 * @param data 選中當(dāng)前行的數(shù)據(jù)
 * @param col 當(dāng)前列的表頭名
 * @param key 修改的屬性名
 */
const edit = (data: any, col: string, key: string,) => {
  /*將要修改的數(shù)據(jù)原本值賦給editableData中的唯一key*/
  editableData[key] = data[col];
};

/**
 * 保存修改的參數(shù)（傳入的參數(shù)可自行調(diào)整，只要能找到當(dāng)前要保存的數(shù)據(jù)就行）
 * @param col 當(dāng)前列的表頭名
 * @param key 修改的屬性名
 */
const save = (key: string, col: string) => {
  /*以下方法并不重要，總之就是實(shí)現(xiàn)將editableData中修改的數(shù)據(jù)賦給tableData中對(duì)應(yīng)的數(shù)據(jù)*/  
  tableData.value.filter((item, index) => {
    return key === item[col] + '' + index
  }).forEach((item) => {
    item[col] = editableData[key]
  });
  /*最后刪除editableData中的數(shù)據(jù)*/
  delete editableData[key];
};
/**
 * 判斷當(dāng)前表頭下對(duì)應(yīng)的單元格是否可編輯
 * @param value 當(dāng)前列的表頭名
 */
function checkCanBeEdit(value: string): boolean {
  return !(['是否可編輯'].includes(value as string))
}

樣式：文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-845249.html

/*編輯主體樣式（根據(jù)實(shí)際調(diào)整）*/
.editable-cell {
  position: relative;

  .editable-cell-input-wrapper,
  .editable-cell-text-wrapper {
    padding-right: 24px;
  }

  .editable-cell-text-wrapper {
    padding: 5px 24px 5px 5px;
  }

  .editable-cell-icon,
  .editable-cell-icon-check {
    position: absolute;
    right: 0;
    width: 20px;
    cursor: pointer;
  }

  .editable-cell-icon {
    margin-top: 4px;
    display: none;
  }

  .editable-cell-icon-check {
    line-height: 28px;
  }

  .editable-cell-icon:hover,
  .editable-cell-icon-check:hover {
    color: #108ee9;
  }
}
.editable-cell:hover .editable-cell-icon {
  display: inline-block;
}

到了這里，關(guān)于Vue3+ts+element ui plus/antdesgin 實(shí)現(xiàn)可編輯單元格/可編輯功能的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！