记录一次vue和element的bug

qq_37392305

已于 2024-08-10 10:04:46 修改

阅读量372

点赞数 4

文章标签： vue.js bug elementui

于 2024-08-10 09:57:16 首次发布

本文链接：https://blog.csdn.net/qq_37392305/article/details/141086343

版权

记录一个vue2框架与elementui的bug：

初次使用浏览器直接引入vue2和elementui时，使用表格出现bug，出现的行转列问题, 用webpack打包的方式则不会出现。

问题描述

使用el-table时，el-table-column 直接使用了闭标签，导致列转成了行，代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试表格</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<div id="appDemo">
    <el-table :data="tableData"
              style="width: 100%">
        <el-table-column prop="name" label="列一" width="180"/>
        <el-table-column label="列二" />
        <el-table-column label="列三" />
        <el-table-column label="列四" />
    </el-table>
</div>

</body>
<script >
    const appDemo = new Vue({
        el: "#appDemo"
    })
</script>
</html>

效果如下:
表格列转成了行

vue3 和elementplus也会出现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试表格</title>
    <!-- Import style -->
    <link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css" />
    <!-- Import Vue 3 -->
    <script src="//unpkg.com/vue@3"></script>
    <!-- Import component library -->
    <script src="//unpkg.com/element-plus"></script>
</head>
<body>
<div id="appDemo">
    <el-table :data="tableData"
              style="width: 100%">
        <el-table-column prop="name" label="列一" width="180"/>
        <el-table-column label="列二"/>
        <el-table-column label="列三" />
        <el-table-column label="列四" />
    </el-table>
</div>

</body>
<script >
    const App = {
        data() {
            return {
                message: "Hello Element Plus",
            };
        },
    };
    const app = Vue.createApp(App);
    app.use(ElementPlus);
    app.mount("#appDemo");
</script>
</html>

vue3和element plus的效果

原因分析：

el-table-column 标签写法错误,导致el-table-column 转成了tr,正常是th

正确显示代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试表格</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<div id="appDemo">
    <el-table :data="tableData"
              style="width: 100%">
        <el-table-column prop="name" label="列一" width="180"></el-table-column>
        <el-table-column label="列二"> </el-table-column>
        <el-table-column label="列三" ></el-table-column>
        <el-table-column label="列四" ></el-table-column>
    </el-table>
</div>

</body>
<script >
    const appDemo = new Vue({
        el: "#appDemo"
    })
</script>
</html>