vue3.2/Vite/Ts41: 对话框 dailog 对话框静态搭建

└─src
    └─views
        └─product
            └─trademark
                └─index.vue

<template>
  <el-card>
    <el-bottom type="primary" size="default" icon="Plus" @click="addTrademark">添加品牌</el-button>
    <!-- ... -->
    <el-table border :data="trademarkArr">
      <!-- ... -->
      <el-table-column label="品牌操作">
        <template #="{row}">
          <el-button type="primary" size="small" icon="Edit" @click="updateTrademark"></el-button>
          <el-button type="primary" size="small" icon="Delete"></el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-card>
  <!-- 对话框组件 -->
  <el-dialog v-model="dialogFormVisible" title="添加品牌">
    <el-form>
      <el-form-item label="品牌名称" label-width="80px">
        <el-input placehodler="请输入品牌名称"></el-input>
      </el-form-item>
      <el-form-item label="品牌LOGO" label-width="80px">
        <el-upload></el-upload>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button type="primary" size="default" @click="cancel">取消</el-button>
      <el-button type="primary" size="default" @click="confirm">确定</el-button>
    </template>
  </el-dialog>
</template>
<script setup lang="ts">
  import { ref, onMounted } from "vue";
  import type {
    Records,
    TradeMarkResponseData,
  } from "@/api/product/trademark/type";
  // 引入接口
  import { reqHasTrademark } from "@/api/product/trademark";
  let pageNo = ref<number>(1);
  let limit = ref<number>(3);
  let total = ref<number>(0);
  let trademarkArr = ref<Records>([]);
  // 获取品牌数据
  const getHasTrademark = async (page = 1) => {
    pageNo.value = page;
    const result: TradeMarkResponseData = await reqHasTrademark(
      pageNo.value,
      limit.value
    );
    if (result.code === 200) {
      total.value = result.data.total;
      trademarkArr.value = result.data.records;
    }
  };
  onMounted(() => {
    getHasTrademark();
  });
  const sizeChange = () => {
    getHasTrademark();
  };

  // 对话框
  const dialogFormVisible = ref<booleam>(false);

  const addTrademark = () => {
    dialogFormVisible.value = true;
  }

  const updateTrademark = () => {
    dialogFormVisible.value = true;
  }

  const cancel = () => {
    dialogFormVisible.value = true;
  }

  const confirm = () => {
    /// 确定
  }
</script>