单html页面中使用vue3,Element-plus,vue3-router

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入Vue3 -->
    <!-- <script src="https://unpkg.com/browse/vue@3.4.27/dist/vue.global.js"></script> -->
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <!-- 引入element-plus样式文件 -->
    <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css" />
    <!-- 引入element-plus组件库 -->
    <script src="https://unpkg.com/element-plus"></script>
    <!-- 引入axios -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
     <!-- 引入vue-router -->
    <script src="https://unpkg.com/vue-router@4.3.2/dist/vue-router.global.js"></script>

</head>
<body>
    <div id="app">
    
        <div>
            <el-table border :stripe="true" :data="tableData" style="width: 100%">
                <el-table-column type="selection" width="55"></el-table-column>
                <el-table-column type="index" label="" width="50"></el-table-column>
                <el-table-column prop="name" label="名称" width="180"></el-table-column>
                <el-table-column prop="unitPrice" label="单价" width="180"></el-table-column>
                <el-table-column prop="quantity" label="数量" width="180">
                    <template #default="scope">
                        <div>
                            <el-input-number v-model="scope.row.quantity" @change="updateTotalPrice(scope.row)" :min="1">{{scope.row.quantity }} </el-input-number>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="总价">
                    <template #default="scope">
                        <div>   
                   {{ scope.row.unitPrice *scope.row.quantity  }}              
                        </div>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <router-link to="/hash1">切换至com1</router-link>
        <router-view></router-view>

    </div>

    <script >

    const com1 = { template: '<div>路由1</div>' }
    const com2 = { template: '<div>路由2</div>' }

    const routeList = [
        { path: '/hash1', component: com1 },
        { path: '/hash2', component: com2 }
    ]
    

        const { createApp, ref, computed } = Vue;
        console.log(Vue);

        const router = VueRouter.createRouter({
            // history 模式:hash 模式
            history: VueRouter.createWebHashHistory(),
            // 挂载路由列表
            routes: routeList
        })


        createApp(
            {
            setup() {
                const userList = ref([])
                const tableData = ref([
          {
    name: 'Tom',
    quantity: 5,
    unitPrice: 12,
  },
  {
    name: 'Tom',
    quantity: 5,
    unitPrice: 12
  },
  {
    name: 'Tom',
    quantity: 5,
    unitPrice: 12
  },
  {
    name: 'Tom',
    quantity: 5,
    unitPrice: 12
  },
]);

let computedPrice = ref();

                return {
                    tableData,
                   userList,
                   computedPrice
                }
            },
            created () {
                // this.userList = tableData
                // this.showUserList()
               this.computedPrice = useComputed(this.computedTotal) 
                
            },
            methods: {
                showUserList(){
                    //使用axios自定义配置,访问指定地址
                    const request = axios.create({
                        baseURL: 'http://localhost:9000'
                    })
                    request
                        .get('/user/allUsers')
                        .then((response) => {
                            console.log('数据获取成功', response.data)
                            this.userList = response.data
                        })
                        .catch((error) => {
                            console.log('数据获取失败', error)
                        })
                },                            
                updateTotalPrice(row){
                   console.log(row); 
                },
            }
        }).use(router).use(ElementPlus).mount('#app')
    </script>
</body>
</html>

可缓存计算每行的总价= 单价 * 数量,只有当数量变化时,才会更新所在列,避免table渲染每次都执行计算函数:

 function useComputed(fn){
    const cache = new Map();
    function getCache(args){
        return cache.get(JSON.stringify(args)); // 确保传入参数值相同
    }
    return function(...args){
        const cacheResult = getCache(args);
        if(cacheResult) {
            return cacheResult;
        }
        const result = computed(() => fn(...args));
        cache.set(JSON.stringify(args), result); // 缓存结果
        return result
    }
}

// methods内定义
  computedTotal(row){
       console.log('computedTotal');
       return row.unitPrice *row.quantity
},

效果如下:

  • 3
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
根据提供的引用内容,可以看出以下几点: 1. 引用\[1\]的代码是修改了App.vue文件,删除了之前的代码,并添加了一个div标签和一个router-view标签,用于显示路由组件。 2. 引用\[2\]的代码是创建了一个Vue Router实例,并配置了路由的路径和对应的组件。其,"/"路径对应的组件是Login.vue,而"/*"路径是一个重定向,将重新进入到默认的路径,即首页。 3. 引用\[3\]的代码是在src文件夹下创建了一个router文件夹,并在该文件夹下创建了index.ts文件。该文件导入了Vue Router的相关函数和类型,并定义了路由的路径和对应的组件。 综上所述,根据提供的引用内容,可以看出这段代码是在Vue3使用Element Plus和TypeScript来配置路由,并结合Flask进行开发。 #### 引用[.reference_title] - *1* *3* [vite+vue3+ts+vue-router+pinia+axios+element-plus](https://blog.csdn.net/zy_080400/article/details/127125359)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* [vue3+Ts+Vite+ElementPlus+Axios+Router+Pinia 创建过程以及会出的错误](https://blog.csdn.net/weixin_45973327/article/details/127805979)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值