vue3+el-table封裝示例詳解(編輯、刪除、查看詳情按鈕一起封裝)

更新時間：2024年09月13日 11:19:36 作者：CallMe_CrabXie

在Vue3中,利用Element?Plus?UI庫封裝表格組件,實現(xiàn)編輯、刪除和查看詳情的功能,通過定義tableData和tableDataHeader來管理表格數(shù)據(jù)和表頭,其中tableData通常從后端獲取,而tableHeader可根據(jù)具體需求自定義,感興趣的朋友跟隨小編一起看看吧

vue3+el-table封裝（編輯、刪除、查看詳情按鈕一起封裝），具體代碼如下所示：

// 封裝源碼（子組件）
<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column
      v-for="(column, index) in tableDataHeader"
      :label="column.label"
      :key="index"
      :prop="column.prop"
      :width="column.width"
    >
      <template #default="scope" v-if="column.operate">
        <el-button
          v-for="item in column.children"
          :key="item.prop"
          :type="item.type"
          @click="btnClick(item.method, scope.row, scope.$index)"
          >{{ item.label }}</el-button
        >
      </template>
    </el-table-column>
  </el-table>
</template>
<script setup lang="ts">
const props = defineProps<{
  tableData: Array<any>
  tableDataHeader: Array<any>
}>()
const emits = defineEmits(['deleteRow', 'editRow', 'detailRow'])
const btnClick = (method, row, index) => {
  console.log('method: ', method)
  emits(method, row, index)
}
</script>
<style scoped></style>

// 父組件調(diào)用
<template>
  <CustomTable
    :tableData="tableData"
    :tableDataHeader="tableDataHeader"
    @deleteRow="deleteRow"
    @editRow="edit"
    @detailRow="detail"
  >
  </CustomTable>
</template>
<script setup lang="ts">
import { onMounted, reactive, ref, type Ref } from 'vue'
import CustomTable from '@/components/Custom-table.vue'
import { data } from '@/data/data.ts'
const tableData: Ref<Array> = ref(data.tableData)
const tableDataHeader = ref(data.tableDataHeader)
const deleteRow = (row: any, index: number) => {
  tableData.value.splice(index, 1)
  console.log('this tableData: ', tableData)
  pagenation.value.total = tableData.value.length
}
const edit = (row, index) => {
  console.log('row: ', row, index)
}
const detail = (row, index) => {
  console.log('row: ', row, index)
}
</script>
<style scoped></style>

對應的tableData和tableDataHeader文件（實際開發(fā)中，應該從后端拿tableData，tableHeader根據(jù)情況自定義）

export const data = {
  tableData: [
    {
      name: 'knife1',
      date: '2024-09-22',
      type: 'butterfly'
    },
    {
      name: 'knife2',
      date: '2024-09-22',
      type: 'M9'
    },
    {
      name: 'knife3',
      date: '2024-09-22',
      type: 'butterfly'
    }
  ],
  tableDataHeader: [
    {
      label: 'Knife Name',
      prop: 'name',
      width: 180
    },
    {
      label: 'Favorite Date',
      prop: 'date',
      width: 180
    },
    {
      label: 'Knife Type',
      prop: 'type',
      width: 180
    },
    {
      label: 'Operation',
      operate: true,
      prop: 'Operation',
      width: '280',
      children: [
        {
          label: 'edit',
          prop: 'edit',
          method: 'editRow',
          type: 'primary'
        },
        {
          label: 'Delete',
          prop: 'Delete',
          method: 'deleteRow',
          type: 'warning'
        },
        {
          label: 'Detail',
          prop: 'Detail',
          method: 'detailRow',
          type: 'info'
        }
      ]
    }
  ]
}

到此這篇關于vue3+el-table封裝示例詳解(編輯、刪除、查看詳情按鈕一起封裝)的文章就介紹到這了,更多相關vue3 el-tale封裝內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: