发票项目明细项动态添加行，项目名称自动补全功能，并且自动检索

已于 2025-07-15 18:49:07 修改
阅读量297 收藏 2
点赞数 7
CC 4.0 BY-SA版权
文章标签： vue.js
于 2025-06-26 18:43:11 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/nndsb/article/details/148930638

功能说明

  1. 项目名称检索：

    • 在输入框中输入内容时，会实时过滤项目列表

    • 点击搜索图标也会触发过滤并展开下拉列表

  2. 下拉列表：

    • 显示匹配的项目名称和分类

    • 匹配文本高亮显示

    • 带图标的项目展示

  3. 底部固定选项：

    • "自行选择商品编码"固定在底部

    • 点击后打开商品编码选择对话框

  4. 商品编码选择：

    • 以网格形式展示商品编码

    • 选择后自动填充到项目名称字段

  5. 表格功能：

    • 使用vxe-table实现高性能表格

    • 金额自动计算

    • 税率下拉选择器

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>发票项目管理系统 - Element UI + vxe-table</title>
    <!-- 引入Element UI样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入vxe-table样式 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vxe-table@3.9.1/lib/style.css">
    <!-- 引入字体图标 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <!-- 修复VXETable未定义的问题 -->
    <script src="https://cdn.jsdelivr.net/npm/xe-utils"></script>
    <script src="https://cdn.jsdelivr.net/npm/vxe-pc-ui@3.1.27"></script>
    <script src="https://cdn.jsdelivr.net/npm/vxe-table@3.9.1"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
        }

        body {
            background: linear-gradient(135deg, #f0f5ff 0%, #e6f7ff 100%);
            min-height: 100vh;
            padding: 20px;
        }

        .app-container {
            max-width: 1200px;
            margin: 0 auto;
            background: white;
            border-radius: 12px;
            box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
            overflow: hidden;
        }

        .header {
            background: linear-gradient(to right, #1a6dcc, #0d4a9e);
            color: white;
            padding: 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .header h1 {
            font-size: 24px;
            font-weight: 600;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .header-actions {
            display: flex;
            gap: 15px;
        }

        .header-actions .el-button {
            background: rgba(255, 255, 255, 0.15);
            border: none;
            color: white;
            transition: all 0.3s;
        }

        .header-actions .el-button:hover {
            background: rgba(255, 255, 255, 0.25);
        }

        .toolbar {
            padding: 15px 20px;
            background: #f8fafd;
            border-bottom: 1px solid #eee;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .toolbar-title {
            font-size: 18px;
            font-weight: 600;
            color: #333;
        }

        .toolbar-actions {
            display: flex;
            gap: 10px;
        }

        .vxe-table-container {
            padding: 20px;
        }

        .vxe-table {
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
        }

        .vxe-table .vxe-header--column {
            background-color: #f5f9ff;
            color: #1a6dcc;
            font-weight: 600;
        }

        .vxe-table .vxe-body--column {
            padding: 12px 10px;
        }

        .footer {
            padding: 20px;
            background: #f8fafd;
            border-top: 1px solid #eee;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .total-section {
            display: flex;
            align-items: center;
            gap: 20px;
        }

        .total-label {
            font-weight: 600;
            color: #666;
        }

        .total-amount {
            font-size: 22px;
            font-weight: 700;
            color: #e74c3c;
        }

        .tax-section {
            color: #666;
            font-size: 14px;
            line-height: 1.6;
        }

        .add-item-btn {
            background: linear-gradient(to right, #2ecc71, #27ae60);
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 6px;
            cursor: pointer;
            font-weight: 600;
            transition: all 0.3s;
        }

        .add-item-btn:hover {
            opacity: 0.9;
            transform: translateY(-2px);
        }

        .custom-autocomplete {
            width: 100%;
        }

        .suggestion-item {
            display: flex;
            align-items: center;
            padding: 8px 12px;
            cursor: pointer;
            transition: all 0.2s;
        }

        .suggestion-item:hover {
            background-color: #f0f7ff;
        }

        .suggestion-icon {
            margin-right: 10px;
            color: #1a6dcc;
            min-width: 20px;
            text-align: center;
        }

        .suggestion-content {
            flex: 1;
            overflow: hidden;
        }

        .suggestion-name {
            font-weight: 500;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .suggestion-category {
            font-size: 12px;
            color: #888;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .fixed-option {
            background: #f8fafd;
            border-top: 1px solid #eee;
            font-weight: 600;
            color: #1a6dcc;
            padding: 10px 12px;
            display: flex;
            align-items: center;
            cursor: pointer;
        }

        .fixed-option:hover {
            background: #e6f0ff;
        }

        .code-modal {
            border-radius: 12px;
            overflow: hidden;
        }

        .code-modal-header {
            background: linear-gradient(to right, #1a6dcc, #0d4a9e);
            color: white;
            padding: 15px 20px;
            font-size: 18px;
            font-weight: 600;
        }

        .code-grid {
            padding: 20px;
            max-height: 400px;
            overflow-y: auto;
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            gap: 15px;
        }

        .code-item {
            border: 1px solid #e1e4e8;
            border-radius: 8px;
            padding: 15px;
            cursor: pointer;
            transition: all 0.2s;
            background: white;
        }

        .code-item:hover {
            border-color: #1a6dcc;
            box-shadow: 0 4px 10px rgba(26, 109, 204, 0.15);
            transform: translateY(-3px);
        }

        .code-name {
            font-weight: 600;
            margin-bottom: 5px;
            color: #333;
        }

        .code-id {
            font-size: 13px;
            color: #666;
        }

        .code-category {
            font-size: 12px;
            color: #888;
            margin-top: 5px;
        }

        .highlight {
            color: #e74c3c;
            font-weight: 600;
        }

        .el-popper.custom-popper {
            max-height: 300px;
            overflow-y: auto;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
            border: none;
            border-radius: 8px;
            padding: 0;
        }

        .vxe-table .vxe-body--row:hover {
            background-color: #f8fbff;
        }

        .amount-cell {
            font-weight: 500;
            color: #1a6dcc;
        }

        .el-input__inner {
            border-radius: 6px;
        }

        .el-select {
            width: 100%;
        }
    </style>
</head>
<body>
<div id="app">
    <div class="app-container">
        <div class="header">
            <h1>
                <i class="fas fa-file-invoice"></i>
                发票项目管理系统
            </h1>
            <div class="header-actions">
                <el-button icon="el-icon-time">开通时间</el-button>
                <el-button icon="el-icon-document">待发单</el-button>
                <el-button icon="el-icon-tickets">待发单</el-button>
            </div>
        </div>

        <div class="toolbar">
            <div class="toolbar-title">发票项目明细</div>
            <div class="toolbar-actions">
                <el-button type="primary" icon="el-icon-plus" @click="addNewItem">新增行</el-button>
                <el-button type="danger" icon="el-icon-delete" @click="deleteItem">删除</el-button>
                <el-button icon="el-icon-upload2">明细导入</el-button>
                <el-button icon="el-icon-discount">对应折扣</el-button>
            </div>
        </div>

        <div class="vxe-table-container">
            <vxe-table
                    :data="tableData"
                    border="inner"
                    show-overflow
                    auto-resize
                    highlight-hover-row
                    ref="invoiceTable"
            >
                <vxe-column type="seq" width="60" title="序号"></vxe-column>
                <vxe-column field="projectName" title="项目名称" min-width="220">
                    <template v-slot="{ row }">
                        <el-autocomplete
                                class="custom-autocomplete"
                                v-model="row.projectName"
                                :fetch-suggestions="querySearch"
                                placeholder="请输入项目名称"
                                @focus="handleFocus(row)"
                                @select="handleSelect"
                                value-key="name"
                                popper-class="custom-popper"
                                :highlight-first-item="true"
                                :trigger-on-focus="true"
                        >
                            <template v-slot:default="{ item }">
                                <div class="suggestion-item">
                                    <div class="suggestion-content">
                                        <div class="suggestion-name">{{ item.name}}</div>
                                    </div>
                                </div>
                            </template>
                            <template v-slot:footer>
                                <div class="fixed-option" @click="showCodeDialog(row)">
                                    <i class="fas fa-barcode"></i>
                                    <span style="margin-left: 8px;">自行选择商品编码</span>
                                </div>
                            </template>
                        </el-autocomplete>
                    </template>
                </vxe-column>
                <vxe-column field="specification" title="规格型号" width="150">
                    <template v-slot="{ row }">
                        <el-input v-model="row.specification" placeholder="规格型号" size="small"></el-input>
                    </template>
                </vxe-column>
                <vxe-column field="unit" title="单位" width="100">
                    <template v-slot="{ row }">
                        <el-input v-model="row.unit" placeholder="单位" size="small"></el-input>
                    </template>
                </vxe-column>
                <vxe-column field="quantity" title="数量" width="100">
                    <template v-slot="{ row }">
                        <el-input-number
                                v-model="row.quantity"
                                :min="0"
                                :precision="2"
                                controls-position="right"
                                size="small"
                                @change="calculateRowAmount(row)"
                        ></el-input-number>
                    </template>
                </vxe-column>
                <vxe-column field="price" title="单价(含税)" width="150">
                    <template v-slot="{ row }">
                        <el-input
                                v-model="row.price"
                                placeholder="0.00"
                                size="small"
                                @input="calculateRowAmount(row)"
                        >
                            <template slot="prepend">¥</template>
                        </el-input>
                    </template>
                </vxe-column>
                <vxe-column field="amount" title="金额(含税)" width="150">
                    <template v-slot="{ row }">
                        <div class="amount-cell">¥ {{ row.amount }}</div>
                    </template>
                </vxe-column>
                <vxe-column field="taxRate" title="税率/征收率" width="150">
                    <template v-slot="{ row }">
                        <el-select v-model="row.taxRate" placeholder="选择税率" size="small">
                            <el-option label="13%" value="13%"></el-option>
                            <el-option label="9%" value="9%"></el-option>
                            <el-option label="6%" value="6%"></el-option>
                            <el-option label="3%" value="3%"></el-option>
                            <el-option label="0%" value="0%"></el-option>
                        </el-select>
                    </template>
                </vxe-column>
            </vxe-table>
        </div>

        <div class="footer">
            <div class="total-section">
                <div class="total-label">合计：</div>
                <div class="total-amount">¥ {{ totalAmount }}</div>
            </div>
            <div class="tax-section">
                <div>*现代服务*现代服务费</div>
                <div>*交通运输设备*等自行车及</div>
                <div>*交通运输设备*普通通行车</div>
            </div>
            <button class="add-item-btn" @click="addNewItem">
                <i class="fas fa-plus-circle"></i> 添加新项目
            </button>
        </div>
    </div>

    <!-- 商品编码选择对话框 -->
    <el-dialog
            title="选择商品编码"
            :visible.sync="codeDialogVisible"
            width="800px"
            custom-class="code-modal"
            :close-on-click-modal="false"
    >
        <div class="code-modal-header">请选择商品编码</div>
        <div class="code-grid">
            <div
                    v-for="(code, index) in commodityCodes"
                    :key="index"
                    class="code-item"
                    @click="selectCode(code)"
            >
                <div class="code-name">{{ code.name }}</div>
                <div class="code-id">编码: {{ code.id }}</div>
                <div class="code-category">{{ code.category }}</div>
            </div>
        </div>
        <span slot="footer" class="dialog-footer">
                <el-button @click="codeDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="codeDialogVisible = false">确 定</el-button>
            </span>
    </el-dialog>
</div>

<script>
    // 修复VXETable未定义的问题
    Vue.use(VXETable);

    new Vue({
        el: '#app',
        data() {
            return {
                tableData: [
                    {
                        id: 1,
                        projectName: '',
                        specification: '',
                        unit: '',
                        quantity: 1,
                        price: '',
                        amount: '0.00',
                        taxRate: '13%'
                    }
                ],
                projectSuggestions: [
                    { name: "办公用品", category: "办公设备", icon: "fas fa-cube" },
                    { name: "技术服务费", category: "现代服务", icon: "fas fa-laptop-code" },
                    { name: "咨询服务", category: "现代服务", icon: "fas fa-headset" },
                    { name: "软件开发", category: "信息技术", icon: "fas fa-code" },
                    { name: "电脑设备", category: "电子产品", icon: "fas fa-desktop" },
                    { name: "网络服务", category: "信息技术", icon: "fas fa-network-wired" },
                    { name: "广告服务", category: "文化传媒", icon: "fas fa-ad" },
                    { name: "维修服务", category: "技术服务", icon: "fas fa-tools" },
                    { name: "培训服务", category: "教育服务", icon: "fas fa-chalkboard-teacher" },
                    { name: "物流服务", category: "运输服务", icon: "fas fa-truck" },
                    { name: "会议服务", category: "商务服务", icon: "fas fa-conference" },
                    { name: "租赁服务", category: "商业服务", icon: "fas fa-key" }
                ],
                commodityCodes: [
                    { id: "109010101", name: "办公用品", category: "办公设备" },
                    { id: "304020202", name: "技术服务", category: "现代服务" },
                    { id: "304030303", name: "咨询服务", category: "现代服务" },
                    { id: "108050505", name: "软件开发", category: "信息技术" },
                    { id: "109030303", name: "电脑设备", category: "电子产品" },
                    { id: "108040404", name: "网络服务", category: "信息技术" },
                    { id: "306010101", name: "广告服务", category: "文化传媒" },
                    { id: "304040404", name: "维修服务", category: "技术服务" },
                    { id: "307020202", name: "培训服务", category: "教育服务" },
                    { id: "302010101", name: "物流服务", category: "运输服务" },
                    { id: "304050505", name: "会议服务", category: "商务服务" },
                    { id: "304060606", name: "租赁服务", category: "商业服务" }
                ],
                codeDialogVisible: false,
                activeRow: null
            };
        },
        computed: {
            totalAmount() {
                return this.tableData.reduce((total, row) => {
                    return total + parseFloat(row.amount || 0);
                }, 0).toFixed(2);
            }
        },
        methods: {
            calculateRowAmount(row) {
                const quantity = parseFloat(row.quantity) || 0;
                const price = parseFloat(row.price) || 0;
                row.amount = (quantity * price).toFixed(2);
            },
            querySearch(queryString, cb) {
                const results = queryString
                    ? this.projectSuggestions.filter(item =>
                        item.name.toLowerCase().includes(queryString.toLowerCase()) ||
                        item.category.toLowerCase().includes(queryString.toLowerCase())
                    )
                    : this.projectSuggestions;

                // 调用 callback 返回建议列表的数据
                cb(results);
            },
            handleFocus(row) {
                this.activeRow = row;
            },
            handleSelect(item) {
                if (this.activeRow) {
                    this.activeRow.xmmc = item.nsrmc;
                }
            },
            highlightMatch(text, query) {
                if (!query || !text) return text;

                const lowerText = text.toLowerCase();
                const lowerQuery = query.toLowerCase();
                const startIndex = lowerText.indexOf(lowerQuery);

                if (startIndex === -1) return text;

                const endIndex = startIndex + query.length;
                const before = text.substring(0, startIndex);
                const match = text.substring(startIndex, endIndex);
                const after = text.substring(endIndex);

                return `${before}<span class="highlight">${match}</span>${after}`;
            },
            showCodeDialog(row) {
                this.activeRow = row;
                this.codeDialogVisible = true;
            },
            selectCode(code) {
                if (this.activeRow) {
                    this.activeRow.projectName = code.name;
                }
                this.codeDialogVisible = false;
            },
            addNewItem() {
                const newId = this.tableData.length > 0
                    ? Math.max(...this.tableData.map(item => item.id)) + 1
                    : 1;

                this.tableData.push({
                    id: newId,
                    projectName: '',
                    specification: '',
                    unit: '',
                    quantity: 1,
                    price: '',
                    amount: '0.00',
                    taxRate: '13%'
                });
            },
            deleteItem() {
                if (this.tableData.length > 1) {
                    this.tableData.pop();
                } else {
                    this.$message.warning('至少保留一行数据');
                }
            }
        }
    });
</script>
</body>
</html>

2、系统简称：OA、CRM、ERP、MES、HRM、SCM、WMS、KMS等
zchen2008
07-28 930
企业级系统简称
【技术白皮书】第四章：信息抽取技术产业应用现状及案例（下）
INTSIG的博客
08-17 3400
信息抽取技术已发展多年，相关产业也日趋成熟，下面是几种主要的信息抽取产业应用......
JSP中达小区物业管理系统hh398（程序+源码+数据库+调试部署+开发环境）
sheji3467的博客
07-31 992
随着城市化进程加速，住宅小区规模扩大、业主需求多元化，传统物业管理依赖人工登记、纸质台账和单一功能软件，存在服务响应慢、信息传递滞后、资源调配低效等问题，导致业主满意度低、物业运营成本高。中达小区作为典型的中大型社区，亟需通过数字化手段整合物业服务流程，提升管理效率与居民生活品质。本课题旨在设计并实现一套覆盖“人-房-车-费-事”全要素的智慧物业管理系统，推动中达小区物业管理向精细化、智能化转型。
基于SpringBoot的财务管理系统的设计与实现
JAVA编码选手的博客
08-02 911
摘 要 在数字化浪潮中，企业运营管理机遇与挑战并存。财务管理作为企业运营的核心，其效率和准确性对企业的生存发展至关重要。传统财务管理模式依赖人工操作，流程繁琐且易出错，信息传递也常滞后，难以满足企业快速决策的需要。随着企业规模扩大、业务增多，财务数据量急剧增长，对数据处理分析能力提出了更高要求。开发先进的财务管理系统迫在眉睫。 为满足上饶某企业财务管理需求，本系统采用前后端分离的流行开发模式搭建。后台运用Spring Boot框架编码，实现高效稳定的业务逻辑处理；前端通过Vue框架进行交互页面渲染，为用户
大数据-案例-离线数仓-在线教育：MySQL(业务数据)-ETL(Sqoop)-＞Hive数仓【ODS层-数据清洗-＞DW层(DWD-统计分析-＞DWS)】-导出(Sqoop)-＞MySQL-＞可视化
u013250861的博客
07-13 2314
一、访问咨询主题看板 1. 需求分析 目的: 分析每一个调研需求需要计算什么指标, 以及计算这个指标需要通过那些维度,而且还包括计算这个需求涉及 到那些表和那些字段 需求1: 统计指定时间段内，访问客户的总数量。能够下钻到小时数据 指标: 访问量 维度: 时间维度: 年 季度 月 天 小时 涉及到哪些表: web_chat_ems_2019_12 涉及到哪些字段: 时间维度: create_time 说明: 发现create_time字段中包含有年 月 天 小时
数仓体系与数据治理全集
weixin_44687655的博客
04-06 3767
数据仓库（Data Warehouse），可简写为DW或DWH。数据仓库，是为企业所有级别的决策制定过程，提供所有类型数据支持的战略集合。它出于分析性报告和决策支持目的而创建。
1.6 vue 监听
chxii的专栏
08-02 535
Vue2中watch功能详解：通过watch选项和$watch方法实现数据监听。watch选项支持静态定义监听器，可配置deep（深度监听）和immediate（立即执行）；$watch方法则支持动态添加/移除监听器。监听对象深层属性推荐使用函数方式或配合计算属性。两者各有优势，watch选项适合初始化时静态监听，$watch方法更适合运行时动态管理监听器生命周期。
Vue 3.0 Composition API：重新定义组件逻辑的组织方式
你若盛开，清风自来
08-02 921
Vue 3.0的Composition API为组件开发带来了革新性改变。它通过setup、reactive、ref等核心函数，实现了更灵活的逻辑组织和复用方式，特别适合复杂组件和大型项目开发。与Options API相比，Composition API提供更好的类型支持，更紧密的TypeScript集成，以及更清晰的代码结构。在实际应用中，它能有效提升代码可维护性和可扩展性。最佳实践包括编写结构化代码、优先测试关键功能、采用数据驱动测试等。Composition API的出现使Vue开发更加现代化，为构建
Vue 中使用 Dexie.js
欢迎大家一起攻克bug
07-31 400
本文介绍了如何在Vue项目中使用Dexie.js实现客户端数据存储的方案。主要内容包括：1）Dexie.js的安装与数据库初始化配置；2）在Vue组件中实现CRUD操作；3）创建Vue插件形式全局使用数据库；4）高级功能如响应式数据绑定、分页查询和事务处理；5）最佳实践包括错误处理、性能优化和数据库升级；6）完整的Todo应用示例。文章展示了Dexie.js与Vue结合能有效构建离线优先的应用程序，提供良好的用户体验。
Vue 3 + TypeScript 从基础到熟练指南
weixin_43746297的博客
07-31 427
TypeScript的核心是类型。在Vue组件中，我们可以为props、emits、reactive状态等定义类型。
在 C++ 中实现类似 Vue 3 的 Pinia 状态管理库
最新发布
软件开发领域最优质的博客
08-04 578
首先，我们定义一个State结构体来存储应用程序的状态。通过以上实现，我们已经在 C++ 中实现了一个简化的 Pinia 状态管理库。虽然它无法完全复现 Pinia 的所有功能，但已经能够满足基本的状态管理需求。支持更多的数据类型。实现更复杂的模块化管理。集成更多的插件和扩展功能。
告别虚拟 DOM？Vue3.6 Vapor 模式的性能革命与实践
xbczrz的博客
08-03 985
简单来说，它是内存中存在的 DOM 描述对象，当数据变化时，框架会先对比新旧虚拟 DOM 的差异（这个过程称为 “diff”），再把差异部分更新到真实 DOM 上。而 Vapor 模式下，数据变化只会直接触发对应 DOM 节点的更新，完全跳过虚拟 DOM 的 diff 过程。作为 Vue 团队耗时两年研发的渲染引擎革新，Vapor 模式彻底改变了传统 Vue 的渲染逻辑，在保持开发体验的同时，将性能推向了新高度。Vapor 模式与 Vue 的响应式系统深度融合，实现了 “哪里变化更哪里” 的精准更新：​。
Vue2的进阶Vue3
2301_81525305的博客
08-02 811
Vue3基础
Vue 响应式数据核心：ref 与 reactive 的本质区别
一名梦想用科技与数学改变人类的世界的人
08-04 332
Vue中ref与reactive的核心差异解析：ref通过包装对象(value属性)处理基础类型和对象，而reactive专为复杂对象设计，基于Proxy实现属性级响应。主要区别在于：1)数据类型适用性-ref全能，reactive仅对象；2)访问方式-ref需.value操作，reactive直接访问；3)响应机制-ref追踪.value变化，reactive代理属性访问。选择依据：基础类型用ref，复杂对象用reactive，组合式API中推荐统一使用ref提升代码一致性。理解这些差异能避免响应式失效问
仓库管理系统-9-前端之Main主要区域的新增表单
qq_20466211的博客
07-31 145
点击新增按钮，弹出对话框，在其中填写表单，并对表单数据进行校验，最后提交到后台存储。
27.（vue3.x+vite）以pinia为中心的开发模板（监听watch）
地图之家
07-31 36
27.（vue3.x+vite）以pinia为中心的开发模板（监听watch）
航天金税销货清单自动导入软件助力发票数据快速录入
航天金税销货清单自动导入软件是一款专门针对税务开具发票和销货清单管理的专业软件。它结合了现有开票软件的操作特点，为用户提供了高效、便捷的自动录入、打印和报表设计功能。下面是根据标题、描述、标签和压缩...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

战族狼魂

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值