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

最新推荐文章于 2024-05-28 11:32:22 发布

CamphorBloom

最新推荐文章于 2024-05-28 11:32:22 发布

阅读量470

点赞数 3

分类专栏：前端文章标签： html vue.js elementui 计算属性缓存

本文链接：https://blog.csdn.net/weixin_45719444/article/details/139044240

版权

前端专栏收录该内容

13 篇文章 1 订阅

订阅专栏

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

效果如下：