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

一，vue代码

    
    <el-dialog title="编辑tag信息" :before-close="closeTagDialog"  v-model="dialogSetTagFormVisible" destroy-on-close      style="font-size: 14px;" >
        <TagEdit :goodsId="curTagGoodsId">TagEdit>
    el-dialog>

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,
    }
}

<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">删除Tagel-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://www.cnblogs.com/architectforest

         对应的源码可以访问这里获取： https://github.com/liuhongdi/
         或: https://gitee.com/liuhongdi

说明：作者:刘宏缔 邮箱: 371125307@qq.com

二，查看效果

三，查看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