vue專案中如何使用this.$confirm

chengxue_123 發表於 2020-10-30
Vue

   首先在element-ui中的el-table下的el-table-column中引入插槽(相當於佔位符)

 

 <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
              >編輯</el-button
            >
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
              >刪除</el-button
            >
          </template>
 handleDelete(index, item) {
      this.$confirm("你確定要刪除嗎,請三思,後果自負", {
        confirmButtonText: "確定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          console.log("確定了,要刪除");
        })
        .catch(() => {
          console.log("放棄了");
        });
    },

此時,需要在main.js中註冊元件

import {MessageBox} from 'element-ui';

// Vue.use(MessageBox);//與其他引用不同的是,這裡“不能”加Vue.use(MessageBox),不然會出現問題,達不到想要的效果

Vue.prototype.$confirm = MessageBox.confirm;