CDN 引入的方式，单元格不能编辑

soarotech commented 2 years ago

您好！我是测试 vue-easytable 时发现一个不懂的东西，不知道是不是BUG 我是使用 CDN 引入的【我的项目只能使用 CDN 引入不能使用 npm 模式,即NODE模式】官方的地址：

【这个地址已经无效，我换成了：】结果表格数据可以展示，但是单元格不能选择，也不能编辑。测试代码全部是官方的：https://happy-coding-clans.github.io/vue-easytable/#/zh/doc/table/cell-edit 如果是选择单元格外面会有一个蓝色的圈圈，以上测试没有蓝色的圈圈，只能单一选择和：https://happy-coding-clans.github.io/vue-easytable/#/zh/doc/start 页面的DOME 一样的单行选择如果是单元格编辑应该会进入编辑状态，但是实际上也是单行选择请问是我哪里做错了吗，但是我时实际上是全部按照开发文档来的谢谢您看一下，是哪里出了问题？

huangshuwei commented 2 years ago

感谢反馈，正在排查

huangshuwei commented 2 years ago

1、文档中 vue2 的引用地址已修复。 2、通过CDN 引用单元格编辑功能，我试了是可以的，示例效果：https://jsfiddle.net/Lfc1kqu0/

soarotech commented 2 years ago

根据你这个源代码，我测试确实可以了。谢谢您的即时回复，我继续研究一下。

enng0227 commented 8 months ago

问一下是怎么解决的? 我这边也是遇到同样的问题, 而且访问不了:示例效果：https://jsfiddle.net/Lfc1kqu0/

huangshuwei commented 8 months ago

问一下是怎么解决的? 我这边也是遇到同样的问题, 而且访问不了:示例效果：https://jsfiddle.net/Lfc1kqu0/

你是无法访问jsfiddle 是吗，我把源代码贴出来：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <!-- 引入样式 -->
        <link
            rel="stylesheet"
            href="https://unpkg.com/vue-easytable/libs/theme-default/index.css"
        />
    </head>

    <body>
        <div id="app">
            <ve-table
                :columns="columns"
                :table-data="tableData"
                row-key-field-name="rowKey"
                :edit-option="editOption"
            ></ve-table>
        </div>
    </body>
    <!-- 先引入 Vue -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/vue-easytable/libs/umd/index.js"></script>
    <script>
        new Vue({
            el: "#app",
            data: function () {
                return {
                    editOption: {
                        // cell value change
                        cellValueChange: ({ row, column }) => {
                            console.log("cellValueChange row::", row);
                            console.log("cellValueChange column::", column);
                        },
                    },
                    columns: [
                        {
                            field: "date",
                            key: "b",
                            title: "Date",
                            width: 200,
                            align: "center",
                            edit: true,
                        },
                        {
                            field: "hobby",
                            key: "c",
                            title: "Hobby",
                            width: 300,
                            align: "left",
                            edit: true,
                        },
                        {
                            field: "address",
                            key: "d",
                            title: "Address",
                            width: "",
                            align: "left",
                            edit: true,
                        },
                    ],
                    tableData: [
                        {
                            rowKey: 1001,
                            name: "John",
                            date: "1900-05-20",
                            hobby: "coding",
                            address: "No.1 Century Avenue, Shanghai",
                        },
                        {
                            rowKey: 1002,
                            name: "Dickerson",
                            date: "1910-06-20",
                            hobby: "coding",
                            address: "No.1 Century Avenue, Beijing",
                        },
                        {
                            rowKey: 1003,
                            name: "Larsen",
                            date: "2000-07-20",
                            hobby: "coding and coding repeat",
                            address: "No.1 Century Avenue, Chongqing",
                        },
                        {
                            rowKey: 1004,
                            name: "Geneva",
                            date: "2010-08-20",
                            hobby: "coding and coding repeat",
                            address: "No.1 Century Avenue, Xiamen",
                        },
                        {
                            rowKey: 1005,
                            name: "Jami",
                            date: "2020-09-20",
                            hobby: "coding and coding repeat",
                            address: "No.1 Century Avenue, Shenzhen",
                        },
                    ],
                };
            },
        });
    </script>
</html>

huangshuwei commented 8 months ago

@enng0227

enng0227 commented 8 months ago

收到，这个源代码，我测试确实是可以的，我继续研究一下是哪里出的问题，感谢!

Happy-Coding-Clans / vue-easytable

CDN 引入的方式，单元格不能编辑 #449