vue.js基于ElementUI如何封裝CRUD的彈框組件

Vue.js基于ElementUI如何封裝CRUD的彈框組件

在現代的前端開發中，CRUD（創建、讀取、更新、刪除）操作是非常常見的需求。為了提升開發效率和代碼復用性，我們可以將CRUD操作封裝成一個通用的彈框組件。本文將詳細介紹如何基于Vue.js和ElementUI封裝一個CRUD彈框組件。

1. 項目初始化

首先，確保你已經安裝了Vue.js和ElementUI。如果還沒有安裝，可以通過以下命令進行安裝：

npm install vue
npm install element-ui

在main.js中引入ElementUI：

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

2. 創建CRUD彈框組件

接下來，我們創建一個名為CrudDialog.vue的組件文件。這個組件將包含一個彈框，用于處理CRUD操作。

2.1 組件結構

<template>
  <el-dialog
    :title="dialogTitle"
    :visible.sync="dialogVisible"
    width="50%"
    @close="handleClose"
  >
    <el-form :model="form" ref="form" label-width="100px">
      <el-form-item label="名稱" prop="name">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="描述" prop="description">
        <el-input type="textarea" v-model="form.description"></el-input>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="handleSubmit">確 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  name: 'CrudDialog',
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    formData: {
      type: Object,
      default: () => ({})
    },
    isEdit: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      dialogVisible: this.visible,
      form: {
        name: '',
        description: ''
      }
    };
  },
  computed: {
    dialogTitle() {
      return this.isEdit ? '編輯' : '新增';
    }
  },
  watch: {
    visible(newVal) {
      this.dialogVisible = newVal;
    },
    formData: {
      handler(newVal) {
        this.form = { ...newVal };
      },
      immediate: true,
      deep: true
    }
  },
  methods: {
    handleClose() {
      this.$emit('update:visible', false);
      this.$refs.form.resetFields();
    },
    handleSubmit() {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.$emit('submit', this.form);
          this.handleClose();
        }
      });
    }
  }
};
</script>

<style scoped>
.el-form-item {
  margin-bottom: 20px;
}
</style>

2.2 組件說明

• el-dialog: ElementUI的彈框組件，用于顯示CRUD操作的界面。
• el-form: ElementUI的表單組件，用于輸入數據。
• el-input: ElementUI的輸入框組件，用于輸入文本。
• el-button: ElementUI的按鈕組件，用于提交或取消操作。

2.3 組件邏輯

• props: 組件接收三個屬性：visible（控制彈框顯示）、formData（表單數據）、isEdit（是否為編輯模式）。
• data: 組件內部維護dialogVisible和form兩個狀態。
• computed: 根據isEdit屬性動態設置彈框標題。
• watch: 監聽visible和formData的變化，更新組件內部狀態。
• methods: 包含handleClose（關閉彈框并重置表單）和handleSubmit（提交表單數據）兩個方法。

3. 使用CRUD彈框組件

在父組件中使用CrudDialog組件，示例如下：

<template>
  <div>
    <el-button type="primary" @click="handleAdd">新增</el-button>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="name" label="名稱"></el-table-column>
      <el-table-column prop="description" label="描述"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="text" @click="handleEdit(scope.row)">編輯</el-button>
          <el-button type="text" @click="handleDelete(scope.row)">刪除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <CrudDialog
      :visible.sync="dialogVisible"
      :formData="formData"
      :isEdit="isEdit"
      @submit="handleSubmit"
    />
  </div>
</template>

<script>
import CrudDialog from './CrudDialog.vue';

export default {
  components: {
    CrudDialog
  },
  data() {
    return {
      tableData: [],
      dialogVisible: false,
      formData: {},
      isEdit: false
    };
  },
  methods: {
    handleAdd() {
      this.formData = {};
      this.isEdit = false;
      this.dialogVisible = true;
    },
    handleEdit(row) {
      this.formData = { ...row };
      this.isEdit = true;
      this.dialogVisible = true;
    },
    handleDelete(row) {
      this.$confirm('確定刪除嗎？', '提示', {
        confirmButtonText: '確定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.tableData = this.tableData.filter(item => item !== row);
        this.$message.success('刪除成功');
      });
    },
    handleSubmit(form) {
      if (this.isEdit) {
        const index = this.tableData.findIndex(item => item === this.formData);
        this.tableData.splice(index, 1, form);
      } else {
        this.tableData.push(form);
      }
      this.dialogVisible = false;
    }
  }
};
</script>

3.1 父組件說明

• el-button: 用于觸發新增操作。
• el-table: 用于展示數據列表。
• CrudDialog: 引入并使用的CRUD彈框組件。

3.2 父組件邏輯

• handleAdd: 打開新增彈框。
• handleEdit: 打開編輯彈框，并傳入當前行的數據。
• handleDelete: 刪除當前行的數據。
• handleSubmit: 處理表單提交，根據是否為編輯模式更新數據列表。

4. 總結

通過封裝CRUD彈框組件，我們可以大大提升代碼的復用性和開發效率。在實際項目中，可以根據需求進一步擴展和優化這個組件，例如添加表單驗證、支持更多類型的輸入控件等。希望本文能幫助你更好地理解和使用Vue.js和ElementUI進行前端開發。