一个奇葩问题, 不知道什么原因, 感觉是幽灵问题

ghost commented 5 years ago

直入主题

官方项目模版
只改动了一个App.vue文件
官方的示例代码

ghost commented 5 years ago

我甚至都回归了最"原始"的方式写页面, 依旧报错, 不信的可以复制下面代码试一下

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <script src="https://unpkg.com/vue/dist/vue.js"></script>
        <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
        <script src="https://unpkg.com/element-ui/lib/index.js"></script>
        <title></title>
    </head>

    <body>
        <div id="app">
            <el-table :data="tableData" style="width: 100%">
                <el-table-column label="日期" width="180">
                    <template slot-scope="scope">
                        <i class="el-icon-time"></i>
                        <span style="margin-left: 10px">{{ scope.row.date }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="姓名" width="180">
                    <template slot-scope="scope">
                        <el-popover trigger="hover" placement="top">
                            <p>姓名: {{ scope.row.name }}</p>
                            <p>住址: {{ scope.row.address }}</p>
                            <div slot="reference" class="name-wrapper">
                                <el-tag size="medium">{{ scope.row.name }}</el-tag>
                            </div>
                        </el-popover>
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                        <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <script>
            new Vue({
                el: '#app',
                data: function() {
                    return {
                        tableData: [{
                            date: '2016-05-02',
                            name: '王小虎',
                            address: '上海市普陀区金沙江路 1518 弄'
                        }, {
                            date: '2016-05-04',
                            name: '王小虎',
                            address: '上海市普陀区金沙江路 1517 弄'
                        }, {
                            date: '2016-05-01',
                            name: '王小虎',
                            address: '上海市普陀区金沙江路 1519 弄'
                        }, {
                            date: '2016-05-03',
                            name: '王小虎',
                            address: '上海市普陀区金沙江路 1516 弄'
                        }]
                    }
                },
                methods: {
                    handleEdit(index, row) {
                        console.log(index, row);
                    },
                    handleDelete(index, row) {
                        console.log(index, row);
                    }
                }
            })
        </script>
    </body>

</html>

ghost commented 5 years ago

该问题已解决, 可能是尤大大改了什么东西, 我发现如果使用低版本的vue就不会报错, 最新版的Vue是2.6.2, 我切换到2.6.1就不报错...这TM

ysfscream commented 5 years ago

slot-scope => v-slot

ElementUI / element-starter

一个奇葩问题, 不知道什么原因, 感觉是幽灵问题 #85