vue3?element-plus?實現表格數據更改功能詳細步驟

更新時間：2023年07月22日 14:48:49 作者：無妄的罪

這篇文章主要介紹了vue3 element-plus實現表格數據更改功能,本文分步驟結合實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下

在 vue3 中使用 element-plus 實現表格數據更改功能，可以通過以下步驟實現：

1.導入 element-plus 的 Table、Form 和 Input 組件，并在組件中引入表格數據：

<template>
  <div>
    <el-table :data="tableData">
      <el-table-column prop="name" label="Name"></el-table-column>
      <el-table-column prop="age" label="Age"></el-table-column>
      <el-table-column prop="address" label="Address"></el-table-column>
      <el-table-column>
        <template #default="{row}">
          <el-button @click="editRow(row)">Edit</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog :visible.sync="dialogVisible">
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="Name" prop="name">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="Age" prop="age">
          <el-input v-model.number="form.age"></el-input>
        </el-form-item>
        <el-form-item label="Address" prop="address">
          <el-input v-model="form.address"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">Cancel</el-button>
        <el-button type="primary" @click="submitForm">Save</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { ref } from 'vue';
import { ElTable, ElTableColumn, ElButton, ElDialog, ElForm, ElFormItem, ElInput } from 'element-plus';
export default {
  components: {
    ElTable,
    ElTableColumn,
    ElButton,
    ElDialog,
    ElForm,
    ElFormItem,
    ElInput,
  },
  setup() {
    const tableData = ref([
      {
        name: 'John',
        age: 30,
        address: 'New York',
      },
      {
        name: 'Jane',
        age: 25,
        address: 'San Francisco',
      },
      {
        name: 'Bob',
        age: 40,
        address: 'Dallas',
      },
    ]);
    const form = ref({});
    const dialogVisible = ref(false);
    const rules = {
      name: [
        { required: true, message: 'Please input name', trigger: 'blur' },
      ],
      age: [
        { required: true, message: 'Please input age', trigger: 'blur' },
        { type: 'number', message: 'Age must be a number', trigger: 'blur' },
      ],
      address: [
        { required: true, message: 'Please input address', trigger: 'blur' },
      ],
    };
    const editRow = (row) => {
      form.value = { ...row };
      dialogVisible.value = true;
    };
    const submitForm = () => {
      const formRef = this.$refs.form;
      formRef.validate((valid) => {
        if (valid) {
          const dataIndex = tableData.value.indexOf(form.value);
          const tableDataCopy = [...tableData.value];
          tableDataCopy.splice(dataIndex, 1, form.value);
          tableData.value = tableDataCopy;
          dialogVisible.value = false;
        }
      });
    };
    return {
      tableData,
      form,
      dialogVisible,
      rules,
      editRow,
      submitForm,
    };
  },
};
</script>

在表格中添加一個“編輯”按鈕，點擊該按鈕會彈出一個對話框，用于修改表格行的數據。
在對話框中添加一個表單，用于輸入修改后的數據。
在對話框的“保存”按鈕上綁定一個 submitForm 方法，用于提交表單數據。在 submitForm 方法中，可以先對輸入的數據進行驗證，如果驗證通過，則將修改后的數據更新到表格中，同時關閉對話框。

以上就是使用 element-plus 實現表格數據更改功能的全部步驟。

到此這篇關于vue3 element-plus 實現表格數據更改功能的文章就介紹到這了,更多相關vue3 element-plus 表格數據更改內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: