Vue3+ts+element ui plus/antdesgin 实现可编辑单元格/可编辑功能-Toy模板网

这篇具有很好参考价值的文章主要介绍了Vue3+ts+element ui plus/antdesgin 实现可编辑单元格/可编辑功能。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

此功能是基于antdesgin表格组件可编辑单元格功能修改来实现，可查看原文档：带单元格编辑功能的表格

具体思路就是在element ui plus 或者 antdesgin 表格组件的单元格插槽中进行修改，放入“editable-cell”这个div就行；

此方法不仅适用于表格，相关需要自定义编辑的功能都可用此方法，核心就是自行调整“editable-cell”下的内容。

代码以及注释如下：


/*插槽内修改*/
<Table :columns="tableHeader" :data-source="tableData">
  <template #bodyCell="{ column: {dataIndex},index, text, record }">
      /*编辑主体*/
      <div class="editable-cell">
         /*如果editableData中存在这个要编辑的属性，则显示input编辑弹框*/
         <div v-if="editableData[record[dataIndex as string]+''+index]" class="editable-cell-input-wrapper">
            /*input绑定的值为editableData要编辑的属性（key）对应的值，以此来编辑*/
            <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图标*/
         <div v-else class="editable-cell-text-wrapper">
             /*通过checkCanBeEdit方法来判断这个单元格是否可编辑（显示编辑图标）*/
             <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：表格数据  
tableHeader：表格头

/**
 * 将正在编辑的数据以key-value形式保存到editableData对象中，每个数据都赋予唯一的key（根据实际调整）
 * 编辑完成后（保存后都会更新最新的table数据） 将保存的key删除
 * 通过editableData中的正在编辑的属性有多少来显示input组件，否则显示编辑图标
 */
const editableData: UnwrapRef<Record<string, any>> = reactive({});

/**
 * 编辑框显示 （传入的参数可自行调整，只要能找到当前要修改的数据就行）
 * @param data 选中当前行的数据
 * @param col 当前列的表头名
 * @param key 修改的属性名
 */
const edit = (data: any, col: string, key: string,) => {
  /*将要修改的数据原本值赋给editableData中的唯一key*/
  editableData[key] = data[col];
};

/**
 * 保存修改的参数（传入的参数可自行调整，只要能找到当前要保存的数据就行）
 * @param col 当前列的表头名
 * @param key 修改的属性名
 */
const save = (key: string, col: string) => {
  /*以下方法并不重要，总之就是实现将editableData中修改的数据赋给tableData中对应的数据*/  
  tableData.value.filter((item, index) => {
    return key === item[col] + '' + index
  }).forEach((item) => {
    item[col] = editableData[key]
  });
  /*最后删除editableData中的数据*/
  delete editableData[key];
};
/**
 * 判断当前表头下对应的单元格是否可编辑
 * @param value 当前列的表头名
 */
function checkCanBeEdit(value: string): boolean {
  return !(['是否可编辑'].includes(value as string))
}

样式：文章来源地址https://www.toymoban.com/news/detail-845249.html

/*编辑主体样式（根据实际调整）*/
.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;
}

到了这里，关于Vue3+ts+element ui plus/antdesgin 实现可编辑单元格/可编辑功能的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！