記錄--極致舒適的Vue可編輯表格

這里給大家分享我在網上總結出來的一些知識，希望對大家有所幫助

使用ElementPlus的Table啥都好，就是沒有可編輯表格！！！??

既然UI庫不支持，那我們實作一個可編輯表格是很難的事么？??難么？??不難么？...

個人覺得如果是業務固定的可編輯表格，使用ElementPlus實作都不難，但是如果需要的是一個通用的可編輯表格，這好像還真說不好，

對于通用的可編輯表格，網上的實作方案也是五花八門，但是看下來多少都有些問題，個人認為一個通用的可編輯表格需要給使用方提供以下能力：

• 支持新增、洗掉、編輯、保存
• 定義可編輯列
• 定義表單組件，既可以是原生標簽，也可以是自定義組件
• 定義表單校驗規則
• 定義資料展示部分
• 定義操作區域
• 幾乎無學習成本

實作了以上需求的可編表格，就可以滿足基本的生產需求了，

在<el-table>組件的基礎上實作可編輯表格，保留<el-table>的使用方式不變，還能提供可編輯功能，同時可編輯功能的配置與<el-table>的使用風格一致，降低學習成本，

放心食用：演示地址

準備資料

const tableData = https://www.cnblogs.com/smileZAZ/archive/2023/06/14/[
  {
    date:'2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
]

基礎表格

基礎表格的用法與<el-table>幾乎沒有區別，唯一的不同就是<el-table>中的data，在<EditTable>中被data-source替換，

<section>
  <h1>無編輯效果</h1>
  <EditTable  :data-source="tableData">
    <EditTableColumn prop="date" label="時間"> </EditTableColumn>
    <EditTableColumn prop="name" label="姓名"> </EditTableColumn>
    <EditTableColumn prop="address" label="地址"> </EditTableColumn>
  </EditTable>
</section>

可修改表格

<EditTableColumn>存在一個#default默認插槽和一個#edit具名插槽，默認插槽和具名插槽都提供了row、actions、$index等值，

可修改表格是在基礎表格上給<EditTableColumn>添加名為edit的具名插槽<template #edit>，

• 通過row可以獲取到當前行的資料，插槽中的表單組件可通過v-model="row.*"對編輯值進行雙向系結，
• 通過actions可以獲取編輯表格的能力，通過action.startEditable($index)開啟編輯，action.cancelEditable($index)取消編輯，action.saveEditable保存編輯，

<section>
  <h1>可編輯效果</h1>
  <EditTable  :data-source="tableData">
    <EditTableColumn prop="date" label="時間">
      <template #edit="{ row }">
        <input v-model="row.date" />
      </template>
    </EditTableColumn>
    <EditTableColumn prop="name" label="姓名">
      <template #edit="{ row }">
        <input v-model="row.name" />
      </template>
    </EditTableColumn>
    <EditTableColumn prop="address" label="地址">
      <template #edit="{ row }">
        <input v-model="row.address" />
      </template>
    </EditTableColumn>
    <EditTableColumn label="操作">
      <template #default="{ actions, $index }">
        <button @click="actions.startEditable($index)">操作</button>
      </template>
      <template #edit="{ actions, $index }">
        <button @click="actions.saveEditable($index)">保存</button>
        <button @click="actions.cancelEditable($index)">取消</button>
      </template>
    </EditTableColumn>
  </EditTable>
</section>

洗掉效果

在上述表格的操作區域增加洗掉按鈕，洗掉按鈕點擊時呼叫actions.delete($index)用來洗掉當前行，

<section>
  <h1>洗掉效果</h1>
  <EditTable  :data-source="tableData">
    <EditTableColumn prop="date" label="時間">
      <template #edit="{ row }">
        <input v-model="row.date" />
      </template>
    </EditTableColumn>
    <EditTableColumn prop="name" label="姓名">
      <template #edit="{ row }">
        <input v-model="row.name" />
      </template>
    </EditTableColumn>
    <EditTableColumn prop="address" label="地址">
      <template #edit="{ row }">
        <input v-model="row.address" />
      </template>
    </EditTableColumn>
    <EditTableColumn label="操作">
      <template #default="{ actions, $index }">
        <button @click="actions.startEditable($index)">操作</button>
        <button @click="actions.deleteRow($index)">洗掉</button>
      </template>
      <template #edit="{ actions, $index }">
        <button @click="actions.saveEditable($index)">保存</button>
        <button @click="actions.cancelEditable($index)">取消</button>
        <button @click="actions.deleteRow($index)">洗掉</button>
      </template>
    </EditTableColumn>
  </EditTable>
</section>

新增效果

組件<EditTable>并不需要提供新增按鈕，如果直接將新增按鈕封裝在組件內，那么這個組件就太呆了，因此<EditTable>只提供了actions.addRow方法，呼叫方可以根據自己的需求完成新增功能，

<script lang="ts" setup>
import { ref } from 'vue';

import EditTable from '@/components/EditTable.vue';
import EditTableColumn from '@/components/EditTableColumn.vue';

const tableData = https://www.cnblogs.com/smileZAZ/archive/2023/06/14/[...];

const addEditTableRef = ref>();
</script>