奇怪的 element-ui 表行为

问题描述

我想为桌面和移动模式使用两个不同的 el-tables。我想用一个简单的 v-if 来做到这一点，但不知何故，即使另一个表格甚至没有呈现，表格似乎也会相互渗透。有时插入符号出现在桌面版中，有时桌面版继承了移动版的视觉效果（展开模式）。

        <el-table
            ref="mobileTable"
            v-if="device==='mobile'"
            :data="tableData"
        >
            <el-table-column type="expand">
                <template slot-scope="props">
                    <p>State: {{ props.row.state }}</p>
                    <p>City: {{ props.row.city }}</p>
                    <p>Address: {{ props.row.address }}</p>
                    <p>Zip: {{ props.row.zip }}</p>
                </template>
            </el-table-column>
            <el-table-column
                label="Date"
                prop="date"
            />
            <el-table-column
                label="Name"
                prop="name"
            />
        </el-table>
        <el-table
            ref="desktopTable"
            v-if="device!=='mobile'"
            :data="tableData"
        >
            <el-table-column
                fixed
                prop="date"
                label="Date"
                width="150"
            />
            <el-table-column
                prop="name"
                label="Name"
                width="120"
            />
            <el-table-column
                prop="state"
                label="State"
                width="120"
            />
            <el-table-column
                prop="city"
                label="City"
                width="120"
            />
            <el-table-column
                prop="address"
                label="Address"
                width="300"
            />
            <el-table-column
                prop="zip"
                label="Zip"
                width="120"
            />
            <el-table-column
                fixed="right"
                label="Operations"
                width="120"
            >
                <template>
                    <el-button type="text" size="small">Detail</el-button>
                    <el-button type="text" size="small">Edit</el-button>
                </template>
            </el-table-column>
        </el-table>

tableData: [
                {
                    date: '2016-05-03',name: 'Tom',state: 'California',city: 'Los Angeles',address: 'No. 189,grove St,Los Angeles',zip: 'CA 90036'
                },{
                    date: '2016-05-02',{
                    date: '2016-05-04',{
                    date: '2016-05-01',{
                    date: '2016-05-08',{
                    date: '2016-05-06',{
                    date: '2016-05-07',zip: 'CA 90036'
                }
            ],

V-else 不起作用，两个单独的数据对象不起作用。使用 el-table doLayout 方法重新加载 refs 不起作用。当我尝试有条件地更改一个 el-table 的内容而不是有条件地呈现两个不同的表时，我得到了更奇怪的结果。例如。自定义“操作”固定元素中出现的插入符号下拉列表，非常奇怪。

我该如何修复/防止这种行为，或者我根本不应该使用元素 uis 表？因为它们对我来说似乎很糟糕。

编辑：我找到了一个修复方法，用一个没有条件呈现的元素包装 el-table 可以解决这个问题。这有效（但将始终显示两张卡）：

<el-card><el-table v-if="!mobile"><!-- desktop --></el-table></el-card>
<el-card><el-table v-if="mobile"><!-- mobile --></el-table></el-card>

这不会（混淆了 el-table 设置/格式）：

<el-card v-if="!mobile"><el-table><!-- desktop --></el-table></el-card>
<el-card v-if="mobile"><el-table><!-- mobile --></el-table></el-card>

这意味着如果你已经有了一个像卡片这样的包装元素，你仍然需要这样做：

<div><el-card v-if="!mobile"><el-table><!-- desktop --></el-table></el-card></div>
<div><el-card v-if="mobile"><el-table><!-- mobile --></el-table></el-card></div>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

javascript vue.js