快捷導(dǎo)航

vue3編寫(xiě)帶提示的表格組件功能

更新時(shí)間：2025年02月20日 11:19:31 作者：weixin_44165996

本文介紹了如何使用Vue 3編寫(xiě)一個(gè)帶提示的表格組件,并假設(shè)每行都有一個(gè)保存按鈕,如果需要全部保存,還會(huì)加上驗(yàn)證,感興趣的朋友一起看看吧

1、假設(shè)每行都有一個(gè)保存按鈕

<template>
  <el-table :data="tableData" class="w100">
    <!-- 姓名列 -->
    <el-table-column prop="name" label="姓名">
      <template #default="{ row }">
        <el-form :model="row" :rules="rules" ref="form">
          <el-form-item prop="name">
            <el-input v-model="row.name" class="w100"/>
          </el-form-item>
        </el-form>
      </template>
    </el-table-column>
    <!-- 年齡列 -->
    <el-table-column prop="age" label="年齡">
      <template #default="{ row }">
        <el-form :model="row" :rules="rules" ref="form">
          <el-form-item prop="age">
            <el-input v-model="row.age" type="number" class="w100"/>
          </el-form-item>
        </el-form>
      </template>
    </el-table-column>
    <el-table-column prop="phone" label="電話號(hào)碼">
      <template #default="{ row }">
        <el-form :model="row" :rules="rules" ref="form">
          <el-form-item prop="phone">
            <el-input v-model="row.phone" maxlength="11" class="w100"/>
          </el-form-item>
        </el-form>
      </template>
    </el-table-column>
    <!-- 操作列 -->
    <el-table-column label="操作">
      <template #default="{ row }">
        <el-button type="primary" @click="handleSave(row)">保存</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>
<script  setup>
import { ref } from 'vue';
    // 表格數(shù)據(jù)
    const tableData = ref([
      { name: '張三', age: 25 },
      { name: '李四', age: 30 },
    ]);
    // 驗(yàn)證規(guī)則
    const rules = {
      name: [
        { required: true, message: '姓名不能為空', trigger: 'blur' },
        { min: 2, max: 5, message: '姓名長(zhǎng)度在 2 到 5 個(gè)字符', trigger: 'blur' },
      ],
      age: [
        { required: true, message: '年齡不能為空', trigger: 'blur' },
        { type: 'number', min: 0, max: 120, message: '年齡必須在 0 到 120 之間', 
         trigger:'blur' },
      ],
      phone: [
        { required: false, message: '電話號(hào)碼不能為空', trigger: 'blur' },
        { pattern: /^1[3-9]\d{9}$/, message: '請(qǐng)輸入正確的手機(jī)號(hào)碼', trigger: 'blur' },
      ],
    };
    // 保存操作
    const handleSave = (row) => {
      // 這里可以調(diào)用后端接口保存數(shù)據(jù)
      console.log('保存數(shù)據(jù):', row);
    };
</script>
<style scoped>
/* .el-input {
  width: 100px;
} */
 .w100{width: 100%;}
 /* .w200{width: 200px;} */
</style>

2、如果需要全部保存時(shí)加上驗(yàn)證

<template>
  <div>
    <el-table :data="tableData" class="w100">
      <!-- 姓名列 -->
      <el-table-column prop="name" label="姓名">
        <template #default="{ row, $index }">
          <el-form :model="row" :rules="rules" :ref="(el) => setFormRef(el, $index)">
            <el-form-item prop="name">
              <el-input v-model="row.name"  class="w100"/>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <!-- 年齡列 -->
      <el-table-column prop="age" label="年齡">
        <template #default="{ row, $index }">
          <el-form :model="row" :rules="rules" :ref="(el) => setFormRef(el, $index)">
            <el-form-item prop="age">
              <el-input v-model="row.age" type="number"  class="w100"/>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <!--電話號(hào)碼 -->
      <el-table-column prop="phone" label="電話號(hào)碼">
      <template #default="{ row }">
        <el-form :model="row" :rules="rules" :ref="(el) => setFormRef(el, $index)">
          <el-form-item prop="phone">
            <el-input v-model="row.phone" maxlength="11" class="w100"/>
          </el-form-item>
        </el-form>
      </template>
    </el-table-column>
    </el-table>
    <!-- 全部保存按鈕 -->
    <el-button type="primary" @click="handleSaveAll">全部保存</el-button>
  </div>
</template>
<script setup>
import { ref } from 'vue';
    // 表格數(shù)據(jù)
    const tableData = ref([
      { name: '張三', age: 25 },
      { name: '李四', age: 30 },
    ]);
    // 表單引用
    const formRefs = ref([]);
    // 設(shè)置表單引用
    const setFormRef = (el, index) => {
      if (el) {
        // 根據(jù)索引更新對(duì)應(yīng)的form ref
        formRefs.value[index] = el;
        console.log(el,index)
      }
    };
    // 驗(yàn)證規(guī)則
    const rules = {
      name: [
        { required: true, message: '姓名不能為空', trigger: 'blur' },
        { min: 2, max: 5, message: '姓名長(zhǎng)度在 2 到 5 個(gè)字符', trigger: 'blur' },
      ],
      age: [
        { required: true, message: '年齡不能為空', trigger: 'blur' },
        { type: 'number', min: 0, max: 120, message: '年齡必須在 0 到 120 之間', trigger: 'blur' },
      ],
      phone: [
        { required: false, message: '電話號(hào)碼不能為空', trigger: 'blur' },
        { pattern: /^1[3-9]\d{9}$/, message: '請(qǐng)輸入正確的手機(jī)號(hào)碼', trigger: 'blur' },
      ],
    };
    // 全部保存操作
    const handleSaveAll = async () => {
      let isValid = true;
      // 遍歷所有表單并觸發(fā)驗(yàn)證
      for (let i = 0; i < formRefs.value.length; i++) {
        const formRef = formRefs.value[i];
        console.log(formRef, 222);
        if (formRef) {
          try {
            await formRef.validate();
          } catch (error) {
            isValid = false;
            console.error(`第 ${i + 1} 行數(shù)據(jù)驗(yàn)證失敗:`, error);
          }
        }
      }
      // 如果所有表單驗(yàn)證通過(guò)，保存數(shù)據(jù)
      if (isValid) {
        console.log('全部數(shù)據(jù)驗(yàn)證通過(guò)，保存數(shù)據(jù):', tableData.value);
        // 這里可以調(diào)用后端接口保存數(shù)據(jù)
      } else {
        console.log('部分?jǐn)?shù)據(jù)驗(yàn)證失敗，請(qǐng)檢查輸入');
      }
    };
</script>
<style scoped>
.w100 {
  width: 100%;
}
</style>

到此這篇關(guān)于vue3編寫(xiě)帶提示的表格組件的文章就介紹到這了,更多相關(guān)vue3提示表格組件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: