javascript - 奇怪的 element-ui 表行为

Question

我想为桌面和移动模式使用两个不同的 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',
                    name: 'Tom',
                    state: 'California',
                    city: 'Los Angeles',
                    address: 'No. 189, Grove St, Los Angeles',
                    zip: 'CA 90036'
                }, {
                    date: '2016-05-04',
                    name: 'Tom',
                    state: 'California',
                    city: 'Los Angeles',
                    address: 'No. 189, Grove St, Los Angeles',
                    zip: 'CA 90036'
                }, {
                    date: '2016-05-01',
                    name: 'Tom',
                    state: 'California',
                    city: 'Los Angeles',
                    address: 'No. 189, Grove St, Los Angeles',
                    zip: 'CA 90036'
                }, {
                    date: '2016-05-08',
                    name: 'Tom',
                    state: 'California',
                    city: 'Los Angeles',
                    address: 'No. 189, Grove St, Los Angeles',
                    zip: 'CA 90036'
                }, {
                    date: '2016-05-06',
                    name: 'Tom',
                    state: 'California',
                    city: 'Los Angeles',
                    address: 'No. 189, Grove St, Los Angeles',
                    zip: 'CA 90036'
                }, {
                    date: '2016-05-07',
                    name: 'Tom',
                    state: 'California',
                    city: 'Los Angeles',
                    address: 'No. 189, Grove St, Los Angeles',
                    zip: 'CA 90036'
                }
            ],

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

如何修复/防止这种行为，或者根本不应该使用元素 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>

标签： javascriptvue.jselement-ui