溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×

忘記密碼？

登錄注冊×

獲取短信驗證碼

其他方式登錄

點擊登錄注冊即表示同意《億速云用戶服務條款》

用戶登錄×

賬戶密碼登錄

請使用微信掃描上方二維碼

使用幫助

請求超時！

請點擊重新獲取二維碼

Vue?element商品列表的增刪改功能怎么實現

發布時間：2022-08-30 13:58:52 來源：億速云閱讀：515 作者：iii 欄目：開發技術

Vue Element商品列表的增刪改功能怎么實現

目錄

引言
項目環境搭建
商品列表展示
添加商品功能
編輯商品功能
刪除商品功能
總結

引言

在現代Web開發中，Vue.js因其簡潔、靈活和高效的特點，成為了前端開發的熱門選擇。而Element UI作為一套基于Vue.js的桌面端組件庫，提供了豐富的UI組件，使得開發者能夠快速構建出美觀且功能強大的用戶界面。本文將詳細介紹如何使用Vue.js和Element UI實現一個商品列表的增刪改功能。

項目環境搭建

在開始實現商品列表的增刪改功能之前，我們需要先搭建一個Vue.js項目，并引入Element UI庫。

1. 創建Vue項目

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

npm install -g @vue/cli

然后，使用Vue CLI創建一個新的Vue項目：

vue create product-list

在創建項目時，選擇默認配置或手動選擇需要的特性。

2. 引入Element UI

進入項目目錄并安裝Element UI：

cd product-list
npm install element-ui --save

在src/main.js中引入Element UI并注冊：

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

Vue.use(ElementUI);

new Vue({
  render: h => h(App),
}).$mount('#app');

3. 創建商品列表組件

在src/components目錄下創建一個名為ProductList.vue的組件文件，并在src/App.vue中引入并使用該組件。

<!-- src/App.vue -->
<template>
  <div id="app">
    <ProductList />
  </div>
</template>

<script>
import ProductList from './components/ProductList.vue';

export default {
  components: {
    ProductList
  }
};
</script>

商品列表展示

在ProductList.vue中，我們將使用Element UI的el-table組件來展示商品列表。

1. 定義商品數據

首先，定義一個商品數據數組，包含商品的名稱、價格和庫存等信息。

<!-- src/components/ProductList.vue -->
<template>
  <div>
    <el-table :data="products" style="width: 100%">
      <el-table-column prop="name" label="商品名稱"></el-table-column>
      <el-table-column prop="price" label="價格"></el-table-column>
      <el-table-column prop="stock" label="庫存"></el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      products: [
        { id: 1, name: '商品A', price: 100, stock: 10 },
        { id: 2, name: '商品B', price: 200, stock: 20 },
        { id: 3, name: '商品C', price: 300, stock: 30 }
      ]
    };
  }
};
</script>

2. 添加操作列

為了實現對商品的增刪改操作，我們需要在表格中添加一個操作列，包含編輯和刪除按鈕。

<!-- src/components/ProductList.vue -->
<template>
  <div>
    <el-table :data="products" style="width: 100%">
      <el-table-column prop="name" label="商品名稱"></el-table-column>
      <el-table-column prop="price" label="價格"></el-table-column>
      <el-table-column prop="stock" label="庫存"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" @click="handleEdit(scope.$index, scope.row)">編輯</el-button>
          <el-button type="danger" size="mini" @click="handleDelete(scope.$index, scope.row)">刪除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      products: [
        { id: 1, name: '商品A', price: 100, stock: 10 },
        { id: 2, name: '商品B', price: 200, stock: 20 },
        { id: 3, name: '商品C', price: 300, stock: 30 }
      ]
    };
  },
  methods: {
    handleEdit(index, row) {
      console.log('編輯商品', index, row);
    },
    handleDelete(index, row) {
      console.log('刪除商品', index, row);
    }
  }
};
</script>

添加商品功能

接下來，我們將實現添加商品的功能。我們將使用Element UI的el-dialog組件來創建一個添加商品的彈窗。

1. 添加彈窗組件

在ProductList.vue中添加一個彈窗組件，用于輸入新商品的信息。

<!-- src/components/ProductList.vue -->
<template>
  <div>
    <el-button type="primary" @click="dialogVisible = true">添加商品</el-button>

    <el-dialog title="添加商品" :visible.sync="dialogVisible" width="30%">
      <el-form :model="newProduct" label-width="80px">
        <el-form-item label="商品名稱">
          <el-input v-model="newProduct.name"></el-input>
        </el-form-item>
        <el-form-item label="價格">
          <el-input v-model="newProduct.price"></el-input>
        </el-form-item>
        <el-form-item label="庫存">
          <el-input v-model="newProduct.stock"></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="handleAdd">確 定</el-button>
      </span>
    </el-dialog>

    <el-table :data="products" style="width: 100%">
      <el-table-column prop="name" label="商品名稱"></el-table-column>
      <el-table-column prop="price" label="價格"></el-table-column>
      <el-table-column prop="stock" label="庫存"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" @click="handleEdit(scope.$index, scope.row)">編輯</el-button>
          <el-button type="danger" size="mini" @click="handleDelete(scope.$index, scope.row)">刪除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false,
      newProduct: {
        name: '',
        price: '',
        stock: ''
      },
      products: [
        { id: 1, name: '商品A', price: 100, stock: 10 },
        { id: 2, name: '商品B', price: 200, stock: 20 },
        { id: 3, name: '商品C', price: 300, stock: 30 }
      ]
    };
  },
  methods: {
    handleAdd() {
      this.products.push({
        id: this.products.length + 1,
        name: this.newProduct.name,
        price: this.newProduct.price,
        stock: this.newProduct.stock
      });
      this.dialogVisible = false;
      this.newProduct = { name: '', price: '', stock: '' };
    },
    handleEdit(index, row) {
      console.log('編輯商品', index, row);
    },
    handleDelete(index, row) {
      console.log('刪除商品', index, row);
    }
  }
};
</script>

2. 表單驗證

為了確保用戶輸入的數據有效，我們可以使用Element UI的表單驗證功能。

<!-- src/components/ProductList.vue -->
<template>
  <div>
    <el-button type="primary" @click="dialogVisible = true">添加商品</el-button>

    <el-dialog title="添加商品" :visible.sync="dialogVisible" width="30%">
      <el-form :model="newProduct" :rules="rules" ref="newProductForm" label-width="80px">
        <el-form-item label="商品名稱" prop="name">
          <el-input v-model="newProduct.name"></el-input>
        </el-form-item>
        <el-form-item label="價格" prop="price">
          <el-input v-model="newProduct.price"></el-input>
        </el-form-item>
        <el-form-item label="庫存" prop="stock">
          <el-input v-model="newProduct.stock"></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="handleAdd">確 定</el-button>
      </span>
    </el-dialog>

    <el-table :data="products" style="width: 100%">
      <el-table-column prop="name" label="商品名稱"></el-table-column>
      <el-table-column prop="price" label="價格"></el-table-column>
      <el-table-column prop="stock" label="庫存"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" @click="handleEdit(scope.$index, scope.row)">編輯</el-button>
          <el-button type="danger" size="mini" @click="handleDelete(scope.$index, scope.row)">刪除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false,
      newProduct: {
        name: '',
        price: '',
        stock: ''
      },
      rules: {
        name: [
          { required: true, message: '請輸入商品名稱', trigger: 'blur' }
        ],
        price: [
          { required: true, message: '請輸入價格', trigger: 'blur' },
          { type: 'number', message: '價格必須為數字值', trigger: 'blur', transform: (value) => Number(value) }
        ],
        stock: [
          { required: true, message: '請輸入庫存', trigger: 'blur' },
          { type: 'number', message: '庫存必須為數字值', trigger: 'blur', transform: (value) => Number(value) }
        ]
      },
      products: [
        { id: 1, name: '商品A', price: 100, stock: 10 },
        { id: 2, name: '商品B', price: 200, stock: 20 },
        { id: 3, name: '商品C', price: 300, stock: 30 }
      ]
    };
  },
  methods: {
    handleAdd() {
      this.$refs.newProductForm.validate((valid) => {
        if (valid) {
          this.products.push({
            id: this.products.length + 1,
            name: this.newProduct.name,
            price: Number(this.newProduct.price),
            stock: Number(this.newProduct.stock)
          });
          this.dialogVisible = false;
          this.newProduct = { name: '', price: '', stock: '' };
        } else {
          return false;
        }
      });
    },
    handleEdit(index, row) {
      console.log('編輯商品', index, row);
    },
    handleDelete(index, row) {
      console.log('刪除商品', index, row);
    }
  }
};
</script>

編輯商品功能

接下來，我們將實現編輯商品的功能。我們將使用與添加商品類似的彈窗組件，并在點擊編輯按鈕時，將當前商品的數據填充到表單中。

1. 添加編輯彈窗組件

在ProductList.vue中添加一個編輯彈窗組件，并在點擊編輯按鈕時顯示該彈窗。

<!-- src/components/ProductList.vue -->
<template>
  <div>
    <el-button type="primary" @click="dialogVisible = true">添加商品</el-button>

    <el-dialog title="添加商品" :visible.sync="dialogVisible" width="30%">
      <el-form :model="newProduct" :rules="rules" ref="newProductForm" label-width="80px">
        <el-form-item label="商品名稱" prop="name">
          <el-input v-model="newProduct.name"></el-input>
        </el-form-item>
        <el-form-item label="價格" prop="price">
          <el-input v-model="newProduct.price"></el-input>
        </el-form-item>
        <el-form-item label="庫存" prop="stock">
          <el-input v-model="newProduct.stock"></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="handleAdd">確 定</el-button>
      </span>
    </el-dialog>

    <el-dialog title="編輯商品" :visible.sync="editDialogVisible" width="30%">
      <el-form :model="currentProduct" :rules="rules" ref="editProductForm" label-width="80px">
        <el-form-item label="商品名稱" prop="name">
          <el-input v-model="currentProduct.name"></el-input>
        </el-form-item>
        <el-form-item label="價格" prop="price">
          <el-input v-model="currentProduct.price"></el-input>
        </el-form-item>
        <el-form-item label="庫存" prop="stock">
          <el-input v-model="currentProduct.stock"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleEditConfirm">確 定</el-button>
      </span>
    </el-dialog>

    <el-table :data="products" style="width: 100%">
      <el-table-column prop="name" label="商品名稱"></el-table-column>
      <el-table-column prop="price" label="價格"></el-table-column>
      <el-table-column prop="stock" label="庫存"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" @click="handleEdit(scope.$index, scope.row)">編輯</el-button>
          <el-button type="danger" size="mini" @click="handleDelete(scope.$index, scope.row)">刪除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false,
      editDialogVisible: false,
      newProduct: {
        name: '',
        price: '',
        stock: ''
      },
      currentProduct: {
        id: '',
        name: '',
        price: '',
        stock: ''
      },
      rules: {
        name: [
          { required: true, message: '請輸入商品名稱', trigger: 'blur' }
        ],
        price: [
          { required: true, message: '請輸入價格', trigger: 'blur' },
          { type: 'number', message: '價格必須為數字值', trigger: 'blur', transform: (value) => Number(value) }
        ],
        stock: [
          { required: true, message: '請輸入庫存', trigger: 'blur' },
          { type: 'number', message: '庫存必須為數字值', trigger: 'blur', transform: (value) => Number(value) }
        ]
      },
      products: [
        { id: 1, name: '商品A', price: 100, stock: 10 },
        { id: 2, name: '商品B', price: 200, stock: 20 },
        { id: 3, name: '商品C', price: 300, stock: 30 }
      ]
    };
  },
  methods: {
    handleAdd() {
      this.$refs.newProductForm.validate((valid) => {
        if (valid) {
          this.products.push({
            id: this.products.length + 1,
            name: this.newProduct.name,
            price: Number(this.newProduct.price),
            stock: Number(this.newProduct.stock)
          });
          this.dialogVisible = false;
          this.newProduct = { name: '', price: '', stock: '' };
        } else {
          return false;
        }
      });
    },
    handleEdit(index, row) {
      this.currentProduct = { ...row };
      this.editDialogVisible = true;
    },
    handleEditConfirm() {
      this.$refs.editProductForm.validate((valid) => {
        if (valid) {
          const index = this.products.findIndex(product => product.id === this.currentProduct.id);
          if (index !== -1) {
            this.products.splice(index, 1, {
              id: this.currentProduct.id,
              name: this.currentProduct.name,
              price: Number(this.currentProduct.price),
              stock: Number(this.currentProduct.stock)
            });
          }
          this.editDialogVisible = false;
        } else {
          return false;
        }
      });
    },
    handleDelete(index, row) {
      console.log('刪除商品', index, row);
    }
  }
};
</script>

2. 實現編輯功能

在handleEditConfirm方法中，我們首先驗證表單數據，然后找到當前商品在列表中的索引，并使用splice方法更新商品數據。

刪除商品功能

最后，我們將實現刪除商品的功能。我們將使用Element UI的el-message-box組件來確認刪除操作。

1. 添加刪除確認彈窗

在`

向AI問一下細節

推薦閱讀：

免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。

上一篇新聞：
SQL處理時間戳時怎么解決時區問題
下一篇新聞：
在PyCharm中怎么使用FMEObjects

猜你喜歡

AI
助
手

產品服務

地區劃分

專題活動

幫助支持

關于我們

售后咨詢

7*24小時在線電話：400-100-2938

7*24小時在線 QQ：800811969

關注億速云

億速云公眾號

手機網站二維碼

亚洲午夜精品一区二区_中文无码日韩欧免_久久香蕉精品视频_欧美主播一区二区三区美女