elementui怎么d出表单然后保存添加一行数据到表格里

在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="scope.row.show"

>

<el-form-item

label=" "

prop="name"

>

<el-input

v-model="ruleForm.name"

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, scope.row)">{{ scope.row.name }}</span>

</template>

</template>

</el-table-column>

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

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

let data = { show: true }

this.datasNew.unshift(data)

},

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

场景： 我们项目在使用elementUI的el-table时，固定了好几列，偶然发现滚动条在固定列的位置无法滚动，其他列的位置是可以滚动的，由于固定列比较多，滚动条滚不动太影响 *** 作了。

原因： 研究下发现，是由于固定列把滚动条给遮住了，所以滚动不了。

解决方法：

    1.修改el-table__fixed样式

    .el-table{

        .el-table__fixed{

             height:auto!important

             bottom:17px!important

        }

    }

    这种解决方法：就是设置bottom值，使得不盖住滚动条。缺点：不适用与含有合计的table,如果含有合计，合计也会上移。

    2.修改el-table__body-wrapper样式的层级，随便设个层级就可

    .el-table__body-wrapper{

         z-index:2

    }

     这种解决方法：解决滚动条被遮住的问题，同时含有合计也适用，缺点：就是表头和合计那部分有阴影，中间的部分没有阴影，不过不影响效果，问题不大。

    3.在1的基础上，不要el-table默认的合计，自己在el-table标签下添加一行div作为合计，然后需要合计的列自己计算，同时滚动的效果也要和内容同步。

    4.如果上面的办法没有满足需求，就自己动手写table吧。

源自：http://www.chenqichun.com/articleDetails/615137be9e58dfeb349beca0

公司的项目有这么一个需求，需要在table表格中用到多表头，以及固定列。

百度了一轮以后，发现element-ui本来就不支持。需要修改源码。于是立马查看一下源码。

使用固定列时，源码本来就没有考虑多表头。所以只能自己加条件判断了。于是对源码进行如下修改

修改完后，重新打包，替换自己项目node_module的文件。就可以愉快地一起使用固定列和多表头了。

---