vue3: 用el-dialog展示component(vue@3.0.5 / element-plus@1.0.1-beta.20)

一，vue代碼

1,GoodsList.vue

html部分:

    <!-- 編輯tag 彈窗 -->
    <el-dialog title="編輯tag信息" :before-close="closeTagDialog"  v-model="dialogSetTagFormVisible" destroy-on-close      style="font-size: 14px;" >
        <TagEdit :goodsId="curTagGoodsId"></TagEdit>
    </el-dialog>

js部分:

setup() {
    …
    //-----------------------------------------tag begin
    //對話框的是否可見
   const dialogSetTagFormVisible = ref(false);
   //當前的商品id
   const curTagGoodsId = ref(0);
   //打開對話框
   const setTab = (goodsId) => {
        curTagGoodsId.value = goodsId;
        dialogSetTagFormVisible.value = true;
   }
   //關閉對話框
    const closeTagDialog = () => {
      getgoodslist();
      dialogSetTagFormVisible.value = false;
    }
 
    return {
 
      //----------------------------------------tag begin
      setTab,
      dialogSetTagFormVisible,
      curTagGoodsId,
      closeTagDialog,
    }
}

2,組件:

TagEdit.vue

<template>
<div>
    <el-form :model="setTagForm" :rules="tagrules" ref="setTagFormRef" label-width="80px" label-position="right">
      <span>輸入多個tag時請用逗號隔開</span>
      <el-form-item label="tag名稱" prop="tagName">
        <el-input v-model="setTagForm.tagName" autocomplete="off" ></el-input>
      </el-form-item>
    </el-form>
    <div style="text-align: right;">
      <el-button @click="saveTagInfo" type="primary">確 定</el-button>
    </div>
 
    <el-table
        :data="goodsTagList"
        border
        row-key="UserId"
        stripe
        style="width: 100%"
    >
      <el-table-column label="Tag ID" min-width="100" prop="tagId"></el-table-column>
      <el-table-column label="Tag名稱" min-width="100" prop="tagName"></el-table-column>
      <el-table-column fixed="right" label="操作" width="280">
        <template  v-slot="scope">
          <el-button @click="delGoodsTag(scope.row.tagId)" style="margin-left:5px;" icon="el-icon-edit"  size="small" type="primary">刪除Tag</el-button>
        </template>
      </el-table-column>
    </el-table>
 
</div>
 
</template>
 
<script>
import {ElMessage, ElMessageBox} from "element-plus";
import {apiGoodsTagList, apiTagAdd, apiTagGoodsDel} from "../../../api/api";
import {reactive, ref} from "vue";
 
export default {
  name: "TagEdit",
  props:['goodsId'],
  setup(props) {
 
    const setTagForm = reactive({
      tagName: "",
    });
    const goodsTagList = ref([]);
 
    const tagrules = reactive({
      tagName: [{ required: true, message: "請輸入tag名稱", trigger: "blur" },],
    });
    const setTagFormRef = ref(null);
    const getTagList = () => {
 
      //alert(props.goodsId);
 
      apiGoodsTagList({
        goodsid:props.goodsId,
      }).then(res => {
        if (res.code == 0) {
          goodsTagList.value = res.data.list;
        } else {
          ElMessage.error("tag信息get失敗:"+res.msg);
        }
      }).catch((error) => {
        ElMessage.error(error);
      })
    }
    getTagList();
    const saveTagInfo = () => {
      setTagFormRef.value.validate((valid) => {
        if (valid) {
          var data = new FormData();
          // 創建一個表單數據
          data.append("tagname",setTagForm.tagName);
          data.append("goodsid", props.goodsId);
          apiTagAdd(data).then(res => {
            if (res.code == 0) {
              ElMessage.success("tag信息保存成功!");
              getTagList();
            } else {
              ElMessage.error("tag信息保存失敗:"+res.msg);
            }
          }).catch((error) => {
            ElMessage.error(error);
          })
        }
      });
    }
 
    const delGoodsTag = (tagId) => {
      let delParam = {
        tagid:tagId,
        goodsid:props.goodsId,
      };
 
      ElMessageBox.confirm("確定從當前商品下刪除當前tag嗎?", "提示", {
        confirmButtonText: "確定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        apiTagGoodsDel(delParam).then(res => {
          console.log("this is res:")
          console.log(res)
          if (res.code == 0) {
            console.log(res.data);
            ElMessage.success("刪除成功!");
            //();
            getTagList();
          } else {
            //alert();
            ElMessage.error("刪除失敗:"+res.msg);
          }
        }).catch((error) => {
          // error
          console.log(error)
        })
      })
    }
 
    return {
      setTagForm,
      tagrules,
      setTagFormRef,
      saveTagInfo,
      goodsTagList,
      delGoodsTag,
    }
  }
}
</script>
 
<style scoped>
 
</style>

說明：劉宏締的架構森林是一個專注架構的博客，

網站：https://blog.imgtouch.com
本文: https://blog.imgtouch.com/index.php/2023/06/01/vue3-yong-eldialog-zhan-shi-component-vue-3-5-elementplus-1/

         對應的源碼可以訪問這里獲取： https://github.com/liuhongdi/
         或: https://gitee.com/liuhongdi

說明：作者:劉宏締 郵箱: [e-mail]

二，查看效果

列表頁:

彈出對話框:

三，查看vue和element的版本:

liuhongdi@lhdpc:/data/vue/storeadmweb$ npm list vue
storeadmweb@0.1.0 /data/vue/storeadmweb
├─┬ @vue/cli-plugin-babel@4.5.9
│ └─┬ @vue/babel-preset-app@4.5.9
│   └── vue@3.0.5 deduped
├─┬ @vue/compiler-sfc@3.0.5
│ └── vue@3.0.5 deduped
├─┬ element-plus@1.0.1-beta.20
│ └── vue@3.0.5 deduped
├─┬ vue-i18n@9.2.0-beta.7
│ └── vue@3.0.5 deduped
├─┬ vue-router@4.0.2
│ └── vue@3.0.5 deduped
├── vue@3.0.5
├─┬ vue3-count-to@1.0.10
│ └── vue@3.0.5 deduped
└─┬ vuex@4.0.0
  └── vue@3.0.5 deduped