8.vue.js实例：Vue.js 表格

最新推荐文章于 2024-08-27 14:55:34 发布
原创 最新推荐文章于 2024-08-27 14:55:34 发布 · 509 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍了一个使用Vue.js实现的简单图书管理系统案例。该系统包括书籍信息展示、排序及添加功能，通过Vue.js的数据双向绑定特性实现了动态更新。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <link href="css/special.css" rel="stylesheet" />
    <!--<script src="js/vue.min.js"></script>-->
    <script src="js/Vue-1.0.11.js"></script>
</head>
<body>
    <form>
        <div class="pc-content">
            <h3>Vue.js 表格</h3>
            <div class="line-txt">


            </div>
            <div id="add-book">
                <table class="grid" id="app">
                    <thead>
                        <tr>
                            <th @click ="sortBy('id')">编号</th>
                            <th>书名</th>
                            <th>作者</th>
                            <th>单价</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="book in books | orderBy sortparam" v-cloak="display none ">
                            <td>{{book.id}}</td>
                            <td>{{book.name}}</td>
                            <td>{{book.author}}</td>
                            <td>{{book.price}}</td>
                        </tr>
                    </tbody>
                </table>


                <legend>添加书籍</legend>
                <div class="line-txt">
                    <label for="">书名</label> <input type="text" class="input-text" v-model="book.name">
                </div>
                <div class="line-txt">
                    <label for="">作者</label> <input type="text" class="input-text" v-model="book.author">
                </div>
                <div class="line-txt">
                    <label for="">价格</label> <input type="text" class="input-text" v-model="book.price">
                </div>
                <input type="button" class="btn-blue-dp" @cilck="addBook()" value="添 加" />


            </div>


        </div>
    </form>
    <script type="text/javascript">
        var loadBook= new Vue({
            el: '#app',
            data: {
                sortparam: '',
                book:
                    { id: 0, author: '', name: '', price: '' },
                books: [
                    { id: 1, author: '曹雪芹', name: '红楼梦', price: 32.0 },
                    { id: 2, author: '施耐庵', name: '水浒传', price: 30.0 },
                    { id: '3', author: '罗贯中', name: '三国演义', price: 24.0 },
                    { id: 4, author: '吴承恩', name: '西游记', price: 20.0 }]
            },
            methods: {
                addBook: function () {
                    //计算书的id                    
                    this.book.id = this.books.length + 1;
                    this.books.push(this.book);
                    console.log(book);
                    //将input中的数据重置
                    //this.book = '';
                },
                sortBy: function (sortparam) {
                    this.sortparam = sortparam;
                }
            }
        });
        
    </script>


</body>
</html>
vue实例+后台大数据简单实践+简单表格
08-16
vue 实例 简单明了 适合 拿来测试 上手!
vue表格编辑实例
06-15
这是一个基于vue2.0的表格编辑实例，下载下来在浏览器打开，可以看到效果，编辑器打开可以看到源码，源码清晰明了
VUE表格例子
lzy2213811239的博客
01-05 2828
修改数据 添加（push(obj)/unshift(obj)） <body> <div id="d1"> <input type="text" v-model="id"/> <input type="text" v-model="name"/><br/> <input type="button" value="up" @click="up"/> <input type="button" valu
VUE写一个简单的表格实例
10-16
在本篇文章里小编给大家整理的是关于VUE中表格的写法实例以及相关知识点内容，需要的朋友们可以参考下。
permission.js:130 [Vue warn]: Error in render: "TypeError: Cannot read properties of null (reading 'phenomenon')" found in ---> <Defpaltodaily> at src/views/mes/defpaltodaily/index.vue <AppMain> at src/layout/components/AppMain.vue <Layout> at src/layout/index.vue <App> at src/App.vue <Root> warn @ vue.runtime.esm.js:620 logError @ vue.runtime.esm.js:1883 globalHandleError @ vue.runtime.esm.js:1878 handleError @ vue.runtime.esm.js:1838 Vue._render @ vue.runtime.esm.js:3544 updateComponent @ vue.runtime.esm.js:4060 get @ vue.runtime.esm.js:4473 Watcher @ vue.runtime.esm.js:4462 mountComponent @ vue.runtime.esm.js:4067 Vue.$mount @ vue.runtime.esm.js:8405 init @ vue.runtime.esm.js:3115 merged @ vue.runtime.esm.js:3298 createComponent @ vue.runtime.esm.js:5968 createElm @ vue.runtime.esm.js:5915 patch @ vue.runtime.esm.js:6467 Vue._update @ vue.runtime.esm.js:3939 updateComponent @ vue.runtime.esm.js:4060 get @ vue.runtime.esm.js:4473 Watcher @ vue.runtime.esm.js:4462 mountComponent @ vue.runtime.esm.js:4067 Vue.$mount @ vue.runtime.esm.js:8405 init @ vue.runtime.esm.js:3115 createComponent @ vue.runtime.esm.js:5968 createElm @ vue.runtime.esm.js:5915 patch @ vue.runtime.esm.js:6467 Vue._update @ vue.runtime.esm.js:3939 updateComponent @ vue.runtime.esm.js:4060 get @ vue.runtime.esm.js:4473 Watcher @ vue.runtime.esm.js:4462 mountComponent @ vue.runtime.esm.js:4067 Vue.$mount @ vue.runtime.esm.js:8405 init @ vue.runtime.esm.js:3115 createComponent @ vue.runtime.esm.js:5968 createElm @ vue.runtime.esm.js:5915 createChildren @ vue.runtime.esm.js:6043 createElm @ vue.runtime.esm.js:5944 patch @ vue.runtime.esm.js:6467 Vue._update @ vue.runtime.esm.js:3939 updateComponent @ vue.runtime.esm.js:4060 get @ vue.runtime.esm.js:4473 Watcher @ vue.runtime.esm.js:4462 mountComponent @ vue.runtime.esm.js:4067 Vue.$mount @ vue.runtime.esm.js:8405 init @ vue.runtime.esm.js:3115 createComponent @ vue.runtime.esm.js:5968 createElm @ vue.runtime.esm.js:5915 createChildren @ vue.runtime.esm.js:6043 createElm @ vue.runtime.esm.js:5944 createChildren @ vue.runtime.esm.js:6043 createElm @ vue.runtime.esm.js:5944 patch @ vue.runtime.esm.js:6467 Vue._update @ vue.runtime.esm.js:3939 updateComponent @ vue.runtime.esm.js:4060 get @ vue.runtime.esm.js:4473 Watcher @ vue.runtime.esm.js:4462 mountComponent @ vue.runtime.esm.js:4067 Vue.$mount @ vue.runtime.esm.js:8405 init @ vue.runtime.esm.js:3115 merged @ vue.runtime.esm.js:3298 createComponent @ vue.runtime.esm.js:5968 createElm @ vue.runtime.esm.js:5915 updateChildren @ vue.runtime.esm.js:6206 patchVnode @ vue.runtime.esm.js:6309 patch @ vue.runtime.esm.js:6472 Vue._update @ vue.runtime.esm.js:3942 updateComponent @ vue.runtime.esm.js:4060 get @ vue.runtime.esm.js:4473 run @ vue.runtime.esm.js:4548 flushSchedulerQueue @ vue.runtime.esm.js:4304 eval @ vue.runtime.esm.js:1979 flushCallbacks @ vue.runtime.esm.js:1905 Promise.then timerFunc @ vue.runtime.esm.js:1932 nextTick @ vue.runtime.esm.js:1989 queueWatcher @ vue.runtime.esm.js:4396 update @ vue.runtime.esm.js:4538 notify @ vue.runtime.esm.js:731 reactiveSetter @ vue.runtime.esm.js:1056 eval @ vue-router.esm.js:2933 eval @ vue-router.esm.js:2932 updateRoute @ vue-router.esm.js:2353 eval @ vue-router.esm.js:2207 eval @ vue-router.esm.js:2341 step @ vue-router.esm.js:1945 step @ vue-router.esm.js:1952 step @ vue-router.esm.js:1952 runQueue @ vue-router.esm.js:1956 eval @ vue-router.esm.js:2336 step @ vue-router.esm.js:1945 eval @ vue-router.esm.js:1949 eval @ vue-router.esm.js:2323 eval @ vue-router.esm.js:2071 eval @ vue-router.esm.js:2147 eval @ permission.js:130 Promise.then eval @ permission.js:130 eval @ vue-router.esm.js:2088 eval @ vue-router.esm.js:2115 eval @ vue-router.esm.js:2115 flatMapComponents @ vue-router.esm.js:2114 eval @ vue-router.esm.js:2050 iterator @ vue-router.esm.js:2301 step @ vue-router.esm.js:1948 step @ vue-router.esm.js:1952 step @ vue-router.esm.js:1952 eval @ vue-router.esm.js:1949 eval @ vue-router.esm.js:2323 eval @ permission.js:41 iterator @ vue-router.esm.js:2301 step @ vue-router.esm.js:1948 runQueue @ vue-router.esm.js:1956 confirmTransition @ vue-router.esm.js:2331 transitionTo @ vue-router.esm.js:2204 replace @ vue-router.esm.js:2557 eval @ vue-router.esm.js:2317 eval @ permission.js:32 Promise.then eval @ permission.js:29 Promise.then eval @ permission.js:27 iterator @ vue-router.esm.js:2301 step @ vue-router.esm.js:1948 runQueue @ vue-router.esm.js:1956 confirmTransition @ vue-router.esm.js:2331 transitionTo @ vue-router.esm.js:2204 init @ vue-router.esm.js:2924 beforeCreate @ vue-router.esm.js:1272 invokeWithErrorHandling @ vue.runtime.esm.js:1853 callHook @ vue.runtime.esm.js:4213 Vue._init @ vue.runtime.esm.js:4994 Vue @ vue.runtime.esm.js:5075 eval @ main.js:82 ./src/main.js @ app.js:5789 __webpack_require__ @ app.js:854 fn @ app.js:151 1 @ app.js:6856 __webpack_require__ @ app.js:854 checkDeferredModules @ app.js:46 （匿名） @ app.js:994 （匿名） @ app.js:997 permission.js:130 TypeError: Cannot read properties of null (reading 'phenomenon') at eval (cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"77d5fc12-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js?!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/views/mes/defpaltodaily/index.vue?vue&type=template&id=11948e6d:422:46) at Proxy.renderList (vue.runtime.esm.js:2648:18) at Proxy.render (cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"77d5fc12-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js?!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/views/mes/defpaltodaily/index.vue?vue&type=template&id=11948e6d:420:17) at Vue._render (vue.runtime.esm.js:3542:22) at VueComponent.updateComponent (vue.runtime.esm.js:4060:21) at Watcher.get (vue.runtime.esm.js:4473:25) at new Watcher (vue.runtime.esm.js:4462:12) at mountComponent (vue.runtime.esm.js:4067:3) at Vue.$mount (vue.runtime.esm.js:8405:10) at init (vue.runtime.esm.js:3115:13) logError @ vue.runtime.esm.js:1887 globalHandleError @ vue.runtime.esm.js:1878 handleError @ vue.runtime.esm.js:1838 Vue._render @ vue.runtime.esm.js:3544 updateComponent @ vue.runtime.esm.js:4060 get @ vue.runtime.esm.js:4473 Watcher @ vue.runtime.esm.js:4462 mountComponent @ vue.runtime.esm.js:4067 Vue.$mount @ vue.runtime.esm.js:8405 init @ vue.runtime.esm.js:3115 merged @ vue.runtime.esm.js:3298 createComponent @ vue.runtime.esm.js:5968 createElm @ vue.runtime.esm.js:5915 patch @ vue.runtime.esm.js:6467 Vue._update @ vue.runtime.esm.js:3939 updateComponent @ vue.runtime.esm.js:4060 get @ vue.runtime.esm.js:4473 Watcher @ vue.runtime.esm.js:4462 mountComponent @ vue.runtime.esm.js:4067 Vue.$mount @ vue.runtime.esm.js:8405 init @ vue.runtime.esm.js:3115 createComponent @ vue.runtime.esm.js:5968 createElm @ vue.runtime.esm.js:5915 patch @ vue.runtime.esm.js:6467 Vue._update @ vue.runtime.esm.js:3939 updateComponent @ vue.runtime.esm.js:4060 get @ vue.runtime.esm.js:4473 Watcher @ vue.runtime.esm.js:4462 mountComponent @ vue.runtime.esm.js:4067 Vue.$mount @ vue.runtime.esm.js:8405 init @ vue.runtime.esm.js:3115 createComponent @ vue.runtime.esm.js:5968 createElm @ vue.runtime.esm.js:5915 createChildren @ vue.runtime.esm.js:6043 createElm @ vue.runtime.esm.js:5944 patch @ vue.runtime.esm.js:6467 Vue._update @ vue.runtime.esm.js:3939 updateComponent @ vue.runtime.esm.js:4060 get @ vue.runtime.esm.js:4473 Watcher @ vue.runtime.esm.js:4462 mountComponent @ vue.runtime.esm.js:4067 Vue.$mount @ vue.runtime.esm.js:8405 init @ vue.runtime.esm.js:3115 createComponent @ vue.runtime.esm.js:5968 createElm @ vue.runtime.esm.js:5915 createChildren @ vue.runtime.esm.js:6043 createElm @ vue.runtime.esm.js:5944 createChildren @ vue.runtime.esm.js:6043 createElm @ vue.runtime.esm.js:5944 patch @ vue.runtime.esm.js:6467 Vue._update @ vue.runtime.esm.js:3939 updateComponent @ vue.runtime.esm.js:4060 get @ vue.runtime.esm.js:4473 Watcher @ vue.runtime.esm.js:4462 mountComponent @ vue.runtime.esm.js:4067 Vue.$mount @ vue.runtime.esm.js:8405 init @ vue.runtime.esm.js:3115 merged @ vue.runtime.esm.js:3298 createComponent @ vue.runtime.esm.js:5968 createElm @ vue.runtime.esm.js:5915 updateChildren @ vue.runtime.esm.js:6206 patchVnode @ vue.runtime.esm.js:6309 patch @ vue.runtime.esm.js:6472 Vue._update @ vue.runtime.esm.js:3942 updateComponent @ vue.runtime.esm.js:4060 get @ vue.runtime.esm.js:4473 run @ vue.runtime.esm.js:4548 flushSchedulerQueue @ vue.runtime.esm.js:4304 eval @ vue.runtime.esm.js:1979 flushCallbacks @ vue.runtime.esm.js:1905 Promise.then timerFunc @ vue.runtime.esm.js:1932 nextTick @ vue.runtime.esm.js:1989 queueWatcher @ vue.runtime.esm.js:4396 update @ vue.runtime.esm.js:4538 notify @ vue.runtime.esm.js:731 reactiveSetter @ vue.runtime.esm.js:1056 eval @ vue-router.esm.js:2933 eval @ vue-router.esm.js:2932 updateRoute @ vue-router.esm.js:2353 eval @ vue-router.esm.js:2207 eval @ vue-router.esm.js:2341 step @ vue-router.esm.js:1945 step @ vue-router.esm.js:1952 step @ vue-router.esm.js:1952 runQueue @ vue-router.esm.js:1956 eval @ vue-router.esm.js:2336 step @ vue-router.esm.js:1945 eval @ vue-router.esm.js:1949 eval @ vue-router.esm.js:2323 eval @ vue-router.esm.js:2071 eval @ vue-router.esm.js:2147 eval @ permission.js:130 Promise.then eval @ permission.js:130 eval @ vue-router.esm.js:2088 eval @ vue-router.esm.js:2115 eval @ vue-router.esm.js:2115 flatMapComponents @ vue-router.esm.js:2114 eval @ vue-router.esm.js:2050 iterator @ vue-router.esm.js:2301 step @ vue-router.esm.js:1948 step @ vue-router.esm.js:1952 step @ vue-router.esm.js:1952 eval @ vue-router.esm.js:1949 eval @ vue-router.esm.js:2323 eval @ permission.js:41 iterator @ vue-router.esm.js:2301 step @ vue-router.esm.js:1948 runQueue @ vue-router.esm.js:1956 confirmTransition @ vue-router.esm.js:2331 transitionTo @ vue-router.esm.js:2204 replace @ vue-router.esm.js:2557 eval @ vue-router.esm.js:2317 eval @ permission.js:32 Promise.then eval @ permission.js:29 Promise.then eval @ permission.js:27 iterator @ vue-router.esm.js:2301 step @ vue-router.esm.js:1948 runQueue @ vue-router.esm.js:1956 confirmTransition @ vue-router.esm.js:2331 transitionTo @ vue-router.esm.js:2204 init @ vue-router.esm.js:2924 beforeCreate @ vue-router.esm.js:1272 invokeWithErrorHandling @ vue.runtime.esm.js:1853 callHook @ vue.runtime.esm.js:4213 Vue._init @ vue.runtime.esm.js:4994 Vue @ vue.runtime.esm.js:5075 eval @ main.js:82 ./src/main.js @ app.js:5789 __webpack_require__ @ app.js:854 fn @ app.js:151 1 @ app.js:6856 __webpack_require__ @ app.js:854 checkDeferredModules @ app.js:46 （匿名） @ app.js:994 （匿名） @ app.js:997 permission.js:130 [Vue warn]: Error in nextTick: "Error: Initialize failed: invalid dom." found in ---> <Defpaltodaily> at src/views/mes/defpaltodaily/index.vue <AppMain> at src/layout/components/AppMain.vue <Layout> at src/layout/index.vue <App> at src/App.vue <Root> warn @ vue.runtime.esm.js:620 logError @ vue.runtime.esm.js:1883 globalHandleError @ vue.runtime.esm.js:1878 handleError @ vue.runtime.esm.js:1838 eval @ vue.runtime.esm.js:1981 flushCallbacks @ vue.runtime.esm.js:1905 Promise.then timerFunc @ vue.runtime.esm.js:1932 nextTick @ vue.runtime.esm.js:1989 Vue.$nextTick @ vue.runtime.esm.js:3515 mounted @ element-ui.common.js:32728 invokeWithErrorHandling @ vue.runtime.esm.js:1853 callHook @ vue.runtime.esm.js:4213 insert @ vue.runtime.esm.js:3136 invokeInsertHook @ vue.runtime.esm.js:6336 patch @ vue.runtime.esm.js:6555 Vue._update @ vue.runtime.esm.js:3942 updateComponent @ vue.runtime.esm.js:4060 get @ vue.runtime.esm.js:4473 run @ vue.runtime.esm.js:4548 flushSchedulerQueue @ vue.runtime.esm.js:4304 eval @ vue.runtime.esm.js:1979 flushCallbacks @ vue.runtime.esm.js:1905 Promise.then timerFunc @ vue.runtime.esm.js:1932 nextTick @ vue.runtime.esm.js:1989 queueWatcher @ vue.runtime.esm.js:4396 update @ vue.runtime.esm.js:4538 notify @ vue.runtime.esm.js:731 reactiveSetter @ vue.runtime.esm.js:1056 eval @ vue-router.esm.js:2933 eval @ vue-router.esm.js:2932 updateRoute @ vue-router.esm.js:2353 eval @ vue-router.esm.js:2207 eval @ vue-router.esm.js:2341 step @ vue-router.esm.js:1945 step @ vue-router.esm.js:1952 step @ vue-router.esm.js:1952 runQueue @ vue-router.esm.js:1956 eval @ vue-router.esm.js:2336 step @ vue-router.esm.js:1945 eval @ vue-router.esm.js:1949 eval @ vue-router.esm.js:2323 eval @ vue-router.esm.js:2071 eval @ vue-router.esm.js:2147 eval @ permission.js:130 Promise.then eval @ permission.js:130 eval @ vue-router.esm.js:2088 eval @ vue-router.esm.js:2115 eval @ vue-router.esm.js:2115 flatMapComponents @ vue-router.esm.js:2114 eval @ vue-router.esm.js:2050 iterator @ vue-router.esm.js:2301 step @ vue-router.esm.js:1948 step @ vue-router.esm.js:1952 step @ vue-router.esm.js:1952 eval @ vue-router.esm.js:1949 eval @ vue-router.esm.js:2323 eval @ permission.js:41 iterator @ vue-router.esm.js:2301 step @ vue-router.esm.js:1948 runQueue @ vue-router.esm.js:1956 confirmTransition @ vue-router.esm.js:2331 transitionTo @ vue-router.esm.js:2204 replace @ vue-router.esm.js:2557 eval @ vue-router.esm.js:2317 eval @ permission.js:32 Promise.then eval @ permission.js:29 Promise.then eval @ permission.js:27 iterator @ vue-router.esm.js:2301 step @ vue-router.esm.js:1948 runQueue @ vue-router.esm.js:1956 confirmTransition @ vue-router.esm.js:2331 transitionTo @ vue-router.esm.js:2204 init @ vue-router.esm.js:2924 beforeCreate @ vue-router.esm.js:1272 invokeWithErrorHandling @ vue.runtime.esm.js:1853 callHook @ vue.runtime.esm.js:4213 Vue._init @ vue.runtime.esm.js:4994 Vue @ vue.runtime.esm.js:5075 eval @ main.js:82 ./src/main.js @ app.js:5789 __webpack_require__ @ app.js:854 fn @ app.js:151 1 @ app.js:6856 __webpack_require__ @ app.js:854 checkDeferredModules @ app.js:46 （匿名） @ app.js:994 （匿名） @ app.js:997 permission.js:130 Error: Initialize failed: invalid dom. at Module.init (echarts.js:2342:15) at VueComponent.eval (VM32918 index.vue:360:34) at Array.eval (vue.runtime.esm.js:1979:12) at flushCallbacks (vue.runtime.esm.js:1905:14) logError @ vue.runtime.esm.js:1887 globalHandleError @ vue.runtime.esm.js:1878 handleError @ vue.runtime.esm.js:1838 eval @ vue.runtime.esm.js:1981 flushCallbacks @ vue.runtime.esm.js:1905 Promise.then timerFunc @ vue.runtime.esm.js:1932 nextTick @ vue.runtime.esm.js:1989 Vue.$nextTick @ vue.runtime.esm.js:3515 mounted @ element-ui.common.js:32728 invokeWithErrorHandling @ vue.runtime.esm.js:1853 callHook @ vue.runtime.esm.js:4213 insert @ vue.runtime.esm.js:3136 invokeInsertHook @ vue.runtime.esm.js:6336 patch @ vue.runtime.esm.js:6555 Vue._update @ vue.runtime.esm.js:3942 updateComponent @ vue.runtime.esm.js:4060 get @ vue.runtime.esm.js:4473 run @ vue.runtime.esm.js:4548 flushSchedulerQueue @ vue.runtime.esm.js:4304 eval @ vue.runtime.esm.js:1979 flushCallbacks @ vue.runtime.esm.js:1905 Promise.then timerFunc @ vue.runtime.esm.js:1932 nextTick @ vue.runtime.esm.js:1989 queueWatcher @ vue.runtime.esm.js:4396 update @ vue.runtime.esm.js:4538 notify @ vue.runtime.esm.js:731 reactiveSetter @ vue.runtime.esm.js:1056 eval @ vue-router.esm.js:2933 eval @ vue-router.esm.js:2932 updateRoute @ vue-router.esm.js:2353 eval @ vue-router.esm.js:2207 eval @ vue-router.esm.js:2341 step @ vue-router.esm.js:1945 step @ vue-router.esm.js:1952 step @ vue-router.esm.js:1952 runQueue @ vue-router.esm.js:1956 eval @ vue-router.esm.js:2336 step @ vue-router.esm.js:1945 eval @ vue-router.esm.js:1949 eval @ vue-router.esm.js:2323 eval @ vue-router.esm.js:2071 eval @ vue-router.esm.js:2147 eval @ permission.js:130 Promise.then eval @ permission.js:130 eval @ vue-router.esm.js:2088 eval @ vue-router.esm.js:2115 eval @ vue-router.esm.js:2115 flatMapComponents @ vue-router.esm.js:2114 eval @ vue-router.esm.js:2050 iterator @ vue-router.esm.js:2301 step @ vue-router.esm.js:1948 step @ vue-router.esm.js:1952 step @ vue-router.esm.js:1952 eval @ vue-router.esm.js:1949 eval @ vue-router.esm.js:2323 eval @ permission.js:41 iterator @ vue-router.esm.js:2301 step @ vue-router.esm.js:1948 runQueue @ vue-router.esm.js:1956 confirmTransition @ vue-router.esm.js:2331 transitionTo @ vue-router.esm.js:2204 replace @ vue-router.esm.js:2557 eval @ vue-router.esm.js:2317 eval @ permission.js:32 Promise.then eval @ permission.js:29 Promise.then eval @ permission.js:27 iterator @ vue-router.esm.js:2301 step @ vue-router.esm.js:1948 runQueue @ vue-router.esm.js:1956 confirmTransition @ vue-router.esm.js:2331 transitionTo @ vue-router.esm.js:2204 init @ vue-router.esm.js:2924 beforeCreate @ vue-router.esm.js:1272 invokeWithErrorHandling @ vue.runtime.esm.js:1853 callHook @ vue.runtime.esm.js:4213 Vue._init @ vue.runtime.esm.js:4994 Vue @ vue.runtime.esm.js:5075 eval @ main.js:82 ./src/main.js @ app.js:5789 __webpack_require__ @ app.js:854 fn @ app.js:151 1 @ app.js:6856 __webpack_require__ @ app.js:854 checkDeferredModules @ app.js:46 （匿名） @ app.js:994 （匿名） @ app.js:997 VM32918 index.vue:368 [Vue warn]: Error in render: "TypeError: Cannot read properties of null (reading 'phenomenon')" found in ---> <Defpaltodaily> at src/views/mes/defpaltodaily/index.vue <AppMain> at src/layout/components/AppMain.vue <Layout> at src/layout/index.vue <App> at src/App.vue <Root> warn @ vue.runtime.esm.js:620 logError @ vue.runtime.esm.js:1883 globalHandleError @ vue.runtime.esm.js:1878 handleError @ vue.runtime.esm.js:1838 Vue._render @ vue.runtime.esm.js:3544 updateComponent @ vue.runtime.esm.js:4060 get @ vue.runtime.esm.js:4473 run @ vue.runtime.esm.js:4548 flushSchedulerQueue @ vue.runtime.esm.js:4304 eval @ vue.runtime.esm.js:1979 flushCallbacks @ vue.runtime.esm.js:1905 Promise.then timerFunc @ vue.runtime.esm.js:1932 nextTick @ vue.runtime.esm.js:1989 queueWatcher @ vue.runtime.esm.js:4396 update @ vue.runtime.esm.js:4538 notify @ vue.runtime.esm.js:731 reactiveSetter @ vue.runtime.esm.js:1056 proxySetter @ vue.runtime.esm.js:4625 eval @ VM32918 index.vue:368 Promise.then getList @ VM32918 index.vue:367 created @ VM32918 index.vue:354 invokeWithErrorHandling @ vue.runtime.esm.js:1853 callHook @ vue.runtime.esm.js:4213 Vue._init @ vue.runtime.esm.js:4998 VueComponent @ vue.runtime.esm.js:5144 createComponentInstanceForVnode @ vue.runtime.esm.js:3280 init @ vue.runtime.esm.js:3111 merged @ vue.runtime.esm.js:3298 createComponent @ vue.runtime.esm.js:5968 createElm @ vue.runtime.esm.js:5915 patch @ vue.runtime.esm.js:6467 Vue._update @ vue.runtime.esm.js:3939 updateComponent @ vue.runtime.esm.js:4060 get @ vue.runtime.esm.js:4473 Watcher @ vue.runtime.esm.js:4462 mountComponent @ vue.runtime.esm.js:4067 Vue.$mount @ vue.runtime.esm.js:8405 init @ vue.runtime.esm.js:3115 createComponent @ vue.runtime.esm.js:5968 createElm @ vue.runtime.esm.js:5915 patch @ vue.runtime.esm.js:6467 Vue._update @ vue.runtime.esm.js:3939 updateComponent @ vue.runtime.esm.js:4060 get @ vue.runtime.esm.js:4473 Watcher @ vue.runtime.esm.js:4462 mountComponent @ vue.runtime.esm.js:4067 Vue.$mount @ vue.runtime.esm.js:8405 init @ vue.runtime.esm.js:3115 createComponent @ vue.runtime.esm.js:5968 createElm @ vue.runtime.esm.js:5915 createChildren @ vue.runtime.esm.js:6043 createElm @ vue.runtime.esm.js:5944 patch @ vue.runtime.esm.js:6467 Vue._update @ vue.runtime.esm.js:3939 updateComponent @ vue.runtime.esm.js:4060 get @ vue.runtime.esm.js:4473 Watcher @ vue.runtime.esm.js:4462 mountComponent @ vue.runtime.esm.js:4067 Vue.$mount @ vue.runtime.esm.js:8405 init @ vue.runtime.esm.js:3115 createComponent @ vue.runtime.esm.js:5968 createElm @ vue.runtime.esm.js:5915 createChildren @ vue.runtime.esm.js:6043 createElm @ vue.runtime.esm.js:5944 createChildren @ vue.runtime.esm.js:6043 createElm @ vue.runtime.esm.js:5944 patch @ vue.runtime.esm.js:6467 Vue._update @ vue.runtime.esm.js:3939 updateComponent @ vue.runtime.esm.js:4060 get @ vue.runtime.esm.js:4473 Watcher @ vue.runtime.esm.js:4462 mountComponent @ vue.runtime.esm.js:4067 Vue.$mount @ vue.runtime.esm.js:8405 init @ vue.runtime.esm.js:3115 merged @ vue.runtime.esm.js:3298 createComponent @ vue.runtime.esm.js:5968 createElm @ vue.runtime.esm.js:5915 updateChildren @ vue.runtime.esm.js:6206 patchVnode @ vue.runtime.esm.js:6309 patch @ vue.runtime.esm.js:6472 Vue._update @ vue.runtime.esm.js:3942 updateComponent @ vue.runtime.esm.js:4060 get @ vue.runtime.esm.js:4473 run @ vue.runtime.esm.js:4548 flushSchedulerQueue @ vue.runtime.esm.js:4304 eval @ vue.runtime.esm.js:1979 flushCallbacks @ vue.runtime.esm.js:1905 Promise.then timerFunc @ vue.runtime.esm.js:1932 nextTick @ vue.runtime.esm.js:1989 queueWatcher @ vue.runtime.esm.js:4396 update @ vue.runtime.esm.js:4538 notify @ vue.runtime.esm.js:731 reactiveSetter @ vue.runtime.esm.js:1056 eval @ vue-router.esm.js:2933 eval @ vue-router.esm.js:2932 updateRoute @ vue-router.esm.js:2353 eval @ vue-router.esm.js:2207 eval @ vue-router.esm.js:2341 step @ vue-router.esm.js:1945 step @ vue-router.esm.js:1952 step @ vue-router.esm.js:1952 runQueue @ vue-router.esm.js:1956 eval @ vue-router.esm.js:2336 step @ vue-router.esm.js:1945 eval @ vue-router.esm.js:1949 eval @ vue-router.esm.js:2323 eval @ vue-router.esm.js:2071 eval @ vue-router.esm.js:2147 eval @ permission.js:130 Promise.then eval @ permission.js:130 eval @ vue-router.esm.js:2088 eval @ vue-router.esm.js:2115 eval @ vue-router.esm.js:2115 flatMapComponents @ vue-router.esm.js:2114 eval @ vue-router.esm.js:2050 iterator @ vue-router.esm.js:2301 step @ vue-router.esm.js:1948 step @ vue-router.esm.js:1952 step @ vue-router.esm.js:1952 eval @ vue-router.esm.js:1949 eval @ vue-router.esm.js:2323 eval @ permission.js:41 iterator @ vue-router.esm.js:2301 step @ vue-router.esm.js:1948 runQueue @ vue-router.esm.js:1956 confirmTransition @ vue-router.esm.js:2331 transitionTo @ vue-router.esm.js:2204 replace @ vue-router.esm.js:2557 eval @ vue-router.esm.js:2317 eval @ permission.js:32 Promise.then eval @ permission.js:29 Promise.then eval @ permission.js:27 iterator @ vue-router.esm.js:2301 step @ vue-router.esm.js:1948 runQueue @ vue-router.esm.js:1956 confirmTransition @ vue-router.esm.js:2331 transitionTo @ vue-router.esm.js:2204 init @ vue-router.esm.js:2924 beforeCreate @ vue-router.esm.js:1272 invokeWithErrorHandling @ vue.runtime.esm.js:1853 callHook @ vue.runtime.esm.js:4213 Vue._init @ vue.runtime.esm.js:4994 Vue @ vue.runtime.esm.js:5075 eval @ main.js:82 ./src/main.js @ app.js:5789 __webpack_require__ @ app.js:854 fn @ app.js:151 1 @ app.js:6856 __webpack_require__ @ app.js:854 checkDeferredModules @ app.js:46 （匿名） @ app.js:994 （匿名） @ app.js:997 VM32918 index.vue:368 TypeError: Cannot read properties of null (reading 'phenomenon')
最新发布
09-24
我们正在解决Vue项目中出现的两个错误： 1. TypeError: Cannot read properties of null (reading 'phenomenon') 2. Error: Initialize failed: invalid dom. 根据引用内容，这些错误通常与数据未初始化或DOM操作...
Error in nextTick: "TypeError: Cannot read properties of undefined (reading 'doLayout')" found in ---> <GoodsCreate> <AppMain> at src/layout/components/AppMain.vue <Layout> at src/layout/index.vue <App> at src/App.vue <Root> warn @ vue.runtime.esm.js:619 logError @ vue.runtime.esm.js:1884 globalHandleError @ vue.runtime.esm.js:1879 handleError @ vue.runtime.esm.js:1839 eval @ vue.runtime.esm.js:1982 flushCallbacks @ vue.runtime.esm.js:1906 Promise.then timerFunc @ vue.runtime.esm.js:1933 nextTick @ vue.runtime.esm.js:1990 Vue.$nextTick @ vue.runtime.esm.js:3521 eval @ create.vue:400 Promise.then eval @ create.vue:387 Promise.then created @ create.vue:382 invokeWithErrorHandling @ vue.runtime.esm.js:1854 callHook @ vue.runtime.esm.js:4219 Vue._init @ vue.runtime.esm.js:5008 VueComponent @ vue.runtime.esm.js:5154 createComponentInstanceForVnode @ vue.runtime.esm.js:3283 init @ vue.runtime.esm.js:3114 merged @ vue.runtime.esm.js:3301 createCompone
05-09
3. 检查表格的ref是否正确设置，并确保在调用doLayout时表格实例存在。 4. 在异步操作中，确保正确使用作用域，避免this指向问题（如引用[3]中使用that=this或箭头函数）。 5. 添加防御性代码，如在访问tzProd....
Uncaught TypeError: Cannot read properties of undefined (reading 'Buttons') at buttons.html5.min.js:8:661 at buttons.html5.min.js:8:508 at buttons.html5.min.js:8:534 datav.min.vue.js:1 Uncaught TypeError: Cannot read properties of undefined (reading 'use') at datav.min.vue.js:1:280422 at datav.min.vue.js:1:143 at datav.min.vue.js:1:162 getTraceability.htm:466 Uncaught TypeError: $(...).DataTable is not a function at Object.success (getTraceability.htm:466:44) at M.success (jquery.form.min.js:22:3376) at c (jquery.min.js:2:25304) at Object.fireWith [as resolveWith] (jquery.min.js:2:26053) at l (jquery.min.js:2:77782) at XMLHttpRequest.<anonymous> (jquery.min.js:2:80265)
08-06
2. 第二个错误可能是因为Vue.js没有正确加载，因为`datav.min.vue.js`（可能是某个基于Vue的数据可视化组件）尝试使用Vue，但Vue未加载或未在它之前加载。 3. 第三个错误是因为在调用`$().DataTable()`时，...
Vue.js表格组件开发实例：自定义封装与父子组件应用
Vue.js表格组件开发实例详解 Vue.js作为现代前端框架，其核心概念之一就是组件化开发。组件是构建复杂应用的关键，通过将可复用的HTML、CSS和JavaScript逻辑封装在一起，实现代码的模块化管理。在本文中，我们将...
vue.js表格组件开发的实例详解
01-19
组件（Component）是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。在较高层面上，组件是自定义元素，Vue.js 的编译器为它添加特殊功能。在有些情况下，组件也可以是原生 HTML 元素的形式，...
运用vue编写表格 实例攻略下载
05-16
如何编写表格添加删除实例步骤攻略下载
Vue.js实现的表格增加删除demo示例
10-18
主要介绍了Vue.js实现的表格增加删除demo,结合实例形式分析了vue.js数据绑定及元素增加、删除等相关操作技巧,需要的朋友可以参考下
vuedatagrid利用Vuejs实现复杂可交互表格的一个例子
08-10
vue-data-grid：利用Vue.js实现复杂可交互表格的一个例子
一个表格组件-vuejs示例
weixin_34341117的博客
07-23 647
分析vuejs官网上一个表格组件的实现过程。 原址：https://cn.vuejs.org/v2/examples/grid-component.html 1、新建一个demo和vue实例 <!--html--> <div id="demo"></div> //js v...
Vue经典实例之可编辑的表格table（史上最简单方便的处理方式，比用element容易理解），同时处理input获取焦点的问题！不好用你找我
2301_79099373的博客
04-18 1184
于是input中editKey===k+‘_’+sub_k为false隐藏，同时p中editKey!4.input使用双向绑定 v-model=‘sub_item.a’，在修改input内容时，会自动更新到data中，修改后到console打印一下数据就清楚了。3.当dblclick 双击事件执行后，当前点击的td下的input中editKey===k+‘_’+sub_k为true，input会被推出来显示，==k+‘_’+sub_k为false，所以p隐藏起来，于是达到编辑的效果。做到真正的技术提升。
vue+ElementUI 更像Excel的表格组件
hrcsdn13的博客
08-27 2703
vue+ElementUI 更像Excel的表格组件
vue 表格和表单绑定
Melissa的博客
06-11 6286
Demo需要是 1.点击表格的每一行，弹出响应的表单2.表单是动态的。（后期要做自动生成表单功能）3.表单上填充数据对应这一行4. 在表单修改后，点击保存能将数据实时反应在表格上。我的思路： 因为表单后期需要做自动生成，所以这一块单独做一个template， 表格的展示数据和表单数据是双向绑定，为了后期能更好调用，分离数据出来使用了vuex的store来储存数据和各种状态UI库 用了 Elemen...
vue表格静态
Timor7hao的专栏
07-16 4439
vue+element的静态表格，可直接复用更改为自己想要的样式。 1）界面如下： 2）代码如下： <template> <div class="scene-container"> <el-card class="card1"> <el-form :inline="true" :model="fo...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值