Vue中使用element-ui給按鈕綁定一個單擊事件實現(xiàn)點擊按鈕就彈出dialog對話框

更新時間：2022年11月22日 08:56:04 作者：一位女士的貓

最近遇到了個需求是使用element-ui插件編寫頁面,點擊按鈕,彈出對話框,這篇文章主要給大家介紹了關于Vue中使用element-ui給按鈕綁定一個單擊事件實現(xiàn)點擊按鈕就彈出dialog對話框的相關資料,需要的朋友可以參考下

1.需求描述

想要實現(xiàn)點擊一個按鈕就彈出一個對話框，在對話框中可輸入數(shù)據(jù)進行提交，在點擊取消時對話框關閉

2.功能實現(xiàn)

1.創(chuàng)建按鈕

在element中把找到按鈕的代碼放到div里

    <el-row>
        <el-button type="primary" plain>新增</el-button>
    </el-row>

2.創(chuàng)建對話框

在element中找到dialog對話框對應的代碼，把代碼粘貼到對應的位置

3.對話框與按鈕的綁定

通過給按鈕添加與對話框相關聯(lián)的綁定事件，來實現(xiàn)點擊按鈕即可彈出對話框

把上圖第一行點擊打開中的

@click="dialogVisible = true"

放到按鈕組件代碼塊兒里，即創(chuàng)建按鈕的代碼變成：

<el-row>
        <el-button type="primary" plain  @click="dialogVisible = true">新增</el-button>
    </el-row>

3.對話框表單的改造

對對話框里的內(nèi)容進行修改，搞成我們想要的樣子

先把以下代碼段刪掉：

然后去element中找到對應表單的代碼貼進去，并對表單代碼中data()里的return方法進行修改（改名、改成員變量），再對<el-form-item>的:model與v-model的名稱進行修改（名稱要與剛剛修改的return里的那個方法一致）

4.點擊“立即創(chuàng)建”實現(xiàn)表單的提交與點擊取消對話框消失

對以下代碼進行修改：

修改成：

            <el-form-item>
                <el-button type="primary" @click="addBrand">立即創(chuàng)建</el-button>
                <el-button @click="dialogVisible = false">取消</el-button>
            </el-form-item>
 
            <!--新增按鈕提交-->
            addBrand() {
                console.log(this.addForm);
            }

4.對“狀態(tài)”Switch開關所提交的類型進行修改

在上述工作做完后，表單已經(jīng)能實現(xiàn)完整功能的表單的提交與取消后對話框消失的功能了，但此時Switch開關提交的類型為ture，若我不想要ture，我想要0或者1，就要對Switch“狀態(tài)”的代碼塊兒進行修改

在element下Switch開關中找到擴展的 value 類型，可以看到有active-value="100" 和inactive-value="0"的代碼，可以把這兩行代碼加入我們的Switch“狀態(tài)”的代碼塊兒中并對數(shù)值進行修改

修改完之后，此時Switch“狀態(tài)”的代碼為：

            <el-form-item label="狀態(tài)">
                <el-switch v-model="addForm.status"
                           active-value="1"
                           inactive-value="0"
                ></el-switch>
            </el-form-item>

5.完整代碼

這樣我們就能實現(xiàn)實現(xiàn)點擊一個按鈕就彈出一個對話框，在對話框中可輸入數(shù)據(jù)進行提交，在點擊取消時對話框關閉的功能啦

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
 
    <style>
  .el-table .warning-row {
    background: oldlace;
  }
 
  .el-table .success-row {
    background: #f0f9eb;
  }
    </style>
 
</head>
<body>
<div id="app">
 
    <!--搜索表單-->
    <el-form :inline="true" :model="brand" class="demo-form-inline">
        <el-form-item label="當前狀態(tài)">
            <el-select v-model="brand.status" placeholder="當前狀態(tài)">
                <el-option label="啟用" value="1"></el-option>
                <el-option label="禁用" value="0"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="企業(yè)名稱">
            <el-input v-model="brand.companyName" placeholder="企業(yè)名稱"></el-input>
        </el-form-item>
        <el-form-item label="品牌名稱">
            <el-input v-model="brand.brandName" placeholder="品牌名稱"></el-input>
        </el-form-item>
 
        <el-form-item>
            <el-button type="primary" @click="onSubmit">查詢</el-button>
        </el-form-item>
    </el-form>
 
 
    <!--第二行的按鈕-->
    <el-row>
        <el-button type="danger" plain>批量刪除</el-button>
        <el-button type="primary" plain  @click="dialogVisible = true">新增</el-button>
    </el-row>
    <!--點擊新增按鈕就彈出對話框-->
    <el-dialog
            title="編輯品牌"
            :visible.sync="dialogVisible"
            width="30%"
            >
 
        <!--彈出的對話框的內(nèi)容-->
        <el-form ref="form" :model="addForm" label-width="80px">
            <el-form-item label="品牌名稱">
                <el-input v-model="addForm.brandName"></el-input>
            </el-form-item>
            <el-form-item label="企業(yè)名稱">
                <el-input v-model="addForm.companyName"></el-input>
            </el-form-item>
            <el-form-item label="排序">
                <el-input v-model="addForm.ordered"></el-input>
            </el-form-item>
            <el-form-item label="活動形式">
                <el-input type="textarea" v-model="addForm.description"></el-input>
            </el-form-item>
            <el-form-item label="狀態(tài)">
                <el-switch v-model="addForm.status"
                           active-value="1"
                           inactive-value="0"
                ></el-switch>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="addBrand">立即創(chuàng)建</el-button>
                <el-button @click="dialogVisible = false">取消</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
 
 
    <!--表格-->
    <template>
        <el-table
                :data="tableData"
                style="width: 100%"
                :row-class-name="tableRowClassName"
                @selection-change="handleSelectionChange"
        >
            <el-table-column
                    type="selection"
                    width="55">
            </el-table-column>
            <el-table-column
                    type="index"
                    width="50">
            </el-table-column>
            <el-table-column
                    prop="brandName"
                    align="center"
                    label="品牌名稱"
                    >
            </el-table-column>
            <el-table-column
                    prop="companyName"
                    align="center"
                    label="企業(yè)姓名"
                    >
            </el-table-column>
            <el-table-column
                    prop="ordered"
                    align="center"
                    label="排序">
            </el-table-column>
            <el-table-column
                    prop="status"
                    align="center"
                    label="當前狀態(tài)">
            </el-table-column>
            <el-table-column
                    align="center"
                    label="操作">
                <el-row>
                    <el-button type="primary">修改</el-button>
                    <el-button type="danger">刪除</el-button>
                </el-row>
            </el-table-column>
        </el-table>
    </template>
 
 
</div>
 
 
<script src="js/vue.js"></script>
<script src="element-ui/lib/index.js"></script>
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
 
<script>
    new Vue({
        el: "#app",
        methods: {
            tableRowClassName({row, rowIndex}) {
            if (rowIndex === 1) {
            return 'warning-row';
            } else if (rowIndex === 3) {
             return 'success-row';
            }
            return '';
            },
 
            //復選框選中后執(zhí)行的方法
            handleSelectionChange(val) {
                this.multipleSelection = val;
                console.log(this.multipleSelection)
            },
 
 
             <!--查詢按鈕提交-->
              onSubmit() {
                console.log(this.brand);
              },
 
              <!--新增按鈕提交-->
              addBrand() {
                console.log(this.addForm);
              }
 
    },
    data() {
      return {
 
      <!--彈出的對話框的內(nèi)容-->
      addForm: {
          brandName:'',
          companyName:'',
          id:'',
          ordered:'',
          description:'',
          status:'',
      },
 
        dialogVisible: false,
 
         multipleSelection: [],
 
        tableData: [{
          brandName: '小米',
          companyName: '小米科技有限公司',
          ordered: '100',
          status:'1',
        }, {
          brandName: '小米',
          companyName: '小米科技有限公司',
          ordered: '100',
          status:'1',
        }, {
          brandName: '小米',
          companyName: '小米科技有限公司',
          ordered: '100',
          status:'1',
        }, {
          brandName: '小米',
          companyName: '小米科技有限公司',
          ordered: '100',
          status:'1',
        }],
 
 
        <!--搜索表單-->
        brand: {
          status: '',
          companyName: '',
          brandName: '',
        }
 
      }
    }
    })
 
</script>
 
</body>
</html>