Vue實(shí)現(xiàn)極致舒適的可編輯表格

更新時(shí)間：2023年06月09日 10:25:22 作者：youth君

使用ElementPlus的Table啥都好，就是沒有可編輯表格，所以這篇文章就來和大家分享一下Vue實(shí)現(xiàn)極致舒適的可編輯表格的方法，希望對(duì)大家有所幫助

準(zhǔn)備數(shù)據(jù)

const tableData = [
  {
    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',
  },
]

基礎(chǔ)表格

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

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

可修改表格

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

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

通過row可以獲取到當(dāng)前行的數(shù)據(jù)。插槽中的表單組件可通過v-model="row.*"對(duì)編輯值進(jìn)行雙向綁定。
通過actions可以獲取編輯表格的能力，通過action.startEditable($index)開啟編輯，action.cancelEditable($index)取消編輯，action.saveEditable保存編輯。

<section>
  <h1>可編輯效果</h1>
  <EditTable class="edit-table" :data-source="tableData">
    <EditTableColumn prop="date" label="時(shí)間">
      <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>

刪除效果

在上述表格的操作區(qū)域增加刪除按鈕，刪除按鈕點(diǎn)擊時(shí)調(diào)用actions.delete($index)用來刪除當(dāng)前行。

<section>
  <h1>刪除效果</h1>
  <EditTable class="edit-table" :data-source="tableData">
    <EditTableColumn prop="date" label="時(shí)間">
      <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>并不需要提供新增按鈕，如果直接將新增按鈕封裝在組件內(nèi)，那么這個(gè)組件就太呆了。因此<EditTable>只提供了actions.addRow方法，調(diào)用方可以根據(jù)自己的需求完成新增功能。

<script lang="ts" setup>
import { ref } from 'vue';
import EditTable from '@/components/EditTable.vue';
import EditTableColumn from '@/components/EditTableColumn.vue';
const tableData = [...];
const addEditTableRef = ref<InstanceType<typeof EditTable>>();
</script>
<template>
  <div class="wrapper">
    <section>
      <h1>新增效果</h1>
      <EditTable ref="addEditTableRef" class="edit-table" :data-source="tableData">
        <EditTableColumn prop="date" label="時(shí)間">
          <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>
      <button @click="addEditTableRef?.editActions.addRow()">新增</button>
    </section>
  </div>
</template>

表單校驗(yàn)

組件<EditTableColumn>允許驗(yàn)證用戶的輸入是否符合規(guī)范，來找到和糾正錯(cuò)誤。只需要為<EditTableColumn :rules="rules">的rules屬性傳入約定的驗(yàn)證規(guī)則，高級(jí)用法可參考async-validator。

總之校驗(yàn)規(guī)則和表單的校驗(yàn)規(guī)則一致。

<section>
  <h1>表單校驗(yàn)效果</h1>
  <EditTable ref="formEditTableRef" class="edit-table" :data-source="tableData">
    <EditTableColumn
      prop="date"
      label="時(shí)間"
      :rules="[{ required: true, message: '時(shí)間是必填項(xiàng)', trigger: 'blur' }]"
    >
      <template #edit="{ row }">
        <input v-model="row.date" />
      </template>
    </EditTableColumn>
    <EditTableColumn
      prop="name"
      label="姓名"
      :rules="[{ required: true, message: '姓名是必填項(xiàng)', trigger: 'blur' }]"
    >
      <template #edit="{ row }">
        <input v-model="row.name" />
      </template>
    </EditTableColumn>
    <EditTableColumn
      prop="address"
      label="地址"
      :rules="[{ required: true, message: '地址是必填項(xiàng)', trigger: 'blur' }]"
    >
      <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>
  <button @click="formEditTableRef?.editActions.addRow()">新增</button>
</section>

獲取編輯后的表單數(shù)據(jù)

組件<EditTable>對(duì)外暴露了resultData響應(yīng)式對(duì)象，可以用來獲取表格的最新數(shù)據(jù)。

<section>
  <h1>獲取編輯結(jié)果</h1>
  <EditTable ref="formEditTableRef" class="edit-table" :data-source="tableData">
    <EditTableColumn
      prop="date"
      label="時(shí)間"
      :rules="[{ required: true, message: '時(shí)間是必填項(xiàng)', trigger: 'blur' }]"
    >
      <template #edit="{ row }">
        <input v-model="row.date" />
      </template>
    </EditTableColumn>
    <EditTableColumn
      prop="name"
      label="姓名"
      :rules="[{ required: true, message: '姓名是必填項(xiàng)', trigger: 'blur' }]"
    >
      <template #edit="{ row }">
        <input v-model="row.name" />
      </template>
    </EditTableColumn>
    <EditTableColumn
      prop="address"
      label="地址"
      :rules="[{ required: true, message: '地址是必填項(xiàng)', trigger: 'blur' }]"
    >
      <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>
  <button @click="formEditTableRef?.editActions.addRow()">新增</button>
  <p>獲取數(shù)據(jù):{{ formEditTableRef?.resultData }}</p>
</section>

另一種數(shù)據(jù)配置

組件<EditTable>除了支持data-source的方式配置數(shù)據(jù)外，還支持request屬性傳入返回?cái)?shù)據(jù)的函數(shù)。

<script lang="ts" setup name="Page-B">
import { ref } from 'vue';
import EditTable from '@/components/EditTable.vue';
import EditTableColumn from '@/components/EditTableColumn.vue';
const loadData = async () => [
  {
    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',
  },
];
</script>
<template>
  <div class="wrapper">
    <section>
      <h1>另一種數(shù)據(jù)配置</h1>
      <EditTable class="edit-table" :request="loadData">
        <EditTableColumn prop="date" label="時(shí)間"> </EditTableColumn>
        <EditTableColumn prop="name" label="姓名"> </EditTableColumn>
        <EditTableColumn prop="address" label="地址"> </EditTableColumn>
      </EditTable>
    </section>
  </div>
</template>

以上就是Vue實(shí)現(xiàn)極致舒適的可編輯表格的詳細(xì)內(nèi)容，更多關(guān)于Vue可編輯表格的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: