快捷導(dǎo)航

vue3?element-plus?實現(xiàn)表格數(shù)據(jù)更改功能詳細步驟

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

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

在 vue3 中使用 element-plus 實現(xiàn)表格數(shù)據(jù)更改功能，可以通過以下步驟實現(xiàn)：

1.導(dǎo)入 element-plus 的 Table、Form 和 Input 組件，并在組件中引入表格數(shù)據(jù)：

<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>

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

以上就是使用 element-plus 實現(xiàn)表格數(shù)據(jù)更改功能的全部步驟。

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

您可能感興趣的文章: