用element-ui ELDialog和ELTable遇见的坑

1、在column中设置type="selection"可以用checkbox复选框

2、element-ui文档中没有交代怎样根据数据源默认选中复选框

3、但是可以考虑用ELTable的toggleRowSelection方法在合适的时间手动选中

4、如果要用ELTable的方法，就需要用注册ref，才能在其父组件中调用其方法

5、此时发现table是在dialog里面的，如果dialog不打开，table的ref是注册不了的（可以给dialog的visible默认为true，但是又有个问题是页面加载出来dialog就打开了，就算在第一时间关掉，还是会闪屏一下）

6、可以用一个定时器来解决问题，虽然很low，但是效果显著，此过程响应很快，用户感知不到是默认选中还是加载之后手动选中

7、（提下此处需求：用户可以选中任意复选框，可以交换任意相邻行顺序，取消按钮取消 *** 作，保存按钮提交选中的行）

至于注释中说到， 此处要用reserve-selection且不能用rowKey ，原因是在调换表格行顺序时，如果未设置reserve-selection，将会丢失表格中所有的复选框选中状态。如果设置了rowKey，在用户选中某行（原状态未选中）并取消提交后，再次打开dialog并渲染表格时，该行为默认选中状态。所以此处不必理会element-ui在控制台报出的“如果设置了reserve-selection，rowKey为必选项”警告

在element+vue项目中，需求要表格内已有数据，点击新增在首行添加一行带输入框内容

table的数据为datas=[],那么下面是一列的数据，多列可循环或复制

　<el-table-column

prop="name"

label="件号"

sortable

show-overflow-tooltip:

true

align="center"

width="180"

>

<template slot-scope="scope">

<template

v-if="scoperowshow"

>

<el-form-item

label=" "

prop="name"

>

<el-input

v-model="ruleFormname"

disabled="true"

size="mini"

>

<i

slot="suffix"

class="el-input__icon el-icon-search"

@click="Partnum"

/>

</el-input>

</el-form-item>

</template>

<template v-else>

<span @click="partNumber(scope$index, scoperow)">{{ scoperowname }}</span>

</template>

</template>

</el-table-column>

这思路主要是template里面还有2个template，在data数组的 *** 作中每条加一个属性show来控制是显示输入框还是里面的某个字段，

addBtn () {// 添加按钮事件

let data = { show: true }

thisdatasNewunshift(data)

},

同思路可自定义添加各种属性给表格做相应 *** 作。

仔细看文档，会发现有这么一个属性，可以记住我们的勾选。（以前没仔细看文档，实现类似的功能，非常心累!）

关键属性：row-key、selection-change和reserve-selection

参考文档： >

1，element-ui表格导出

    这个功能很容易实现，网上也有很多相关方法，一般都是使用xlsx和file-saver，这里我直接贴上自己使用的封装

上面这个js直接引入使用即可。下面为使用：

2，表格导出数据重复问题

    问题产生：产生数据重复问题主要是因为element表格使用的时候使用了fixed属性，审查元素可发现，elementui的实现方式是：创建了两个tabledom，通过一个隐藏一个显示来实现交互效果。当我导出整个el-table 就会将两个div内的table都导出，导致数据重复。

    问题解决：修改fixed属性值即可。这里重新构造导出函数。

以上就是关于用element-ui ELDialog和ELTable遇见的坑全部的内容，包括:用element-ui ELDialog和ELTable遇见的坑、elementui怎么d出表单然后保存添加一行数据到表格里、element-ui table跨页勾选简单实现(个人笔记)等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！