Vue如何动态修改el-table的某列数据
更新时间:2022年04月23日 16:52:38 作者:guohongyanghy
这篇文章主要介绍了Vue如何动态修改el-table的某列数据,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
动态修改el-table的某列数据
1.对话框打开时调用函数open@opened="checked"
2.可编辑
<el-table-column -------- visEdit="true" >
3.同步选中的数据List:multipleSelection ,函数 checked: function ()
设置el-table某一列点击出现输入框可以编辑
设置el-table 某一列点击出现输入框可以编辑,鼠标失去输入框焦点时输入框消失,显示对应的值。
如下图所示:
具体实现:
<el-table :data="tableData" v-loading="loading" :row-class-name="tableRowClassName" border max-height="780" style="width: 100%" size="mini" @cell-click="tabClick"> <el-table-column label="顺序" prop="adSort"> <template slot-scope="scope"> <span v-if="scope.row.index === tabClickIndex && tabClickLabel === '顺序'"> <el-input v-model="scope.row.adSort" type="number" maxlength="20" placeholder="请输入顺序" size="mini" @blur="inputBlur(scope.row)" /> </span> <span v-else>{{ scope.row.adSort }}</span> </template> </el-table-column> </el-table>
通过 tableRowClassName 设置每一行的index:
tableRowClassName ({ row, rowIndex }) { // 把每一行的索引放进row row.index = rowIndex }
行点击事件,当某一行被点击时,该行的某列设置 tabClickIndex:
由于
v-if="scope.row.index === tabClickIndex && tabClickLabel === '顺序'"
所以当前点击行的某列会出现输入框:
// tabClick row 当前行 column 当前列 tabClick (row, column, cell, event) { switch (column.label) { case '顺序': this.tabClickIndex = row.index this.tabClickLabel = column.label break default: return } console.log('tabClick', this.tabClickIndex, row.adName, row.adSort) }
鼠标失焦事件:
// 失去焦点初始化 inputBlur (row) { // console.log('row', row) this.tabClickIndex = null this.tabClickLabel = '' }
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。
相关文章
使用Vue.js和Element-UI做一个简单登录页面的实例
下面小编就为大家分享一篇使用Vue.js和Element-UI做一个简单登录页面的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧2018-02-02vue项目中使用lib-flexible解决移动端适配的问题解决
这篇文章主要介绍了vue项目中使用lib-flexible解决移动端适配的问题解决,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧2018-08-08
最新评论