Блог

Я хочу использовать две разные таблицы el для настольного и мобильного режимов. Я хотел сделать это с помощью простого 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 doesnt work, two seperate data-objects dont work. Reloading the refs with the el-table doLayout method doesnt work. I get even weirder results when I try to conditionally change the content of one el-table, instead of conditionally rendering two different tables. E.G. the caret dropdown appearing in the custom «operations» fixed element, which is insanely weird.

How can I fix/prevent this behaviour or should I not use element uis tables at all? Because they seem VERY buggy to me.

Edit: I found one fix, wrapping the el-table with an element which isnt conditionally rendered fixes the problem.
This works (but both cards will always be displayed):

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

This doesnt (mixes up the el-table settings/formatting):

 <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>