无法在这个位置找到: head2.htm
当前位置: 建站首页 > 新闻动态 > 公司新闻 >

微信小程序平台_Vue+Element完成表格修改、删除、

时间:2021-01-07 13:27来源:微信小程序平台 作者:jianzhan 点击:
Vue+Element完成报表编写、删掉、及其增加行的最佳方式 light~ 本文关键为大伙儿详尽详细介绍了Vue+Element完成报表的编写、删掉、及其增加行的最佳方式,具备一定的参照使用价值,
Vue+Element实现表格编辑、删除、以及新增行的最优方法     light~   这篇文章主要为大家详细介绍了Vue+Element实现表格的编辑、删除、以及新增行的最优方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

之前已经实现了表格的新增、编辑和删除,在我的中写的也比较详细。但是总感觉有点不完美,首先新增了一行以后,必须要双击某一个单元格参能进行内容的输入。从代码上来说,代码量也较大;而且使用的是原生的html标签,有点尴尬。

于是,进一步研以后,进行了一定的优化,直接使用vue的代码实现,不仅大大减少了代码量,还实现了操作的友好性。下面直接上代码:

1 html部分

这次的优化其实主要在于html部分,直接将vue的el-input标签或者el-select标签放入表格的每个单元格中。这样就不用去考虑表格内容的编辑问题了。

 el-form :model="inServForm" ref="inServForm" label-width="130px" size="small" 
 el-form-item label="输入参数列表" prop="servin" 
 el-button type="primary" @click="addRow(infiledList)" 新增 /el-button 
 template 
 el-table border :data="infiledList" 
 el-table-column prop="fildna" label="名称" 
 template scope="scope" 
 el-input size="mini" v-model="scope.row.fildna" /el-input 
 /template 
 /el-table-column 
 el-table-column prop="fildtp" label="类型" 
 template scope="scope" 
 el-select v-model="scope.row.fildtp" clearable 
 el-option
 v-for="item in fildt凡科抠图"
 :key="item.value"
 :label="item.text"
 :value="item.value" 
 /el-option 
 /el-select 
 /template 
 /el-table-column 
 el-table-column prop="remark" label="备注" 
 template scope="scope" 
 el-input size="mini" v-model="scope.row.remark" /el-input 
 /template 
 /el-table-column 
 el-table-column fixed="right" label="操作" 
 template slot-scope="scope" 
 el-button @click.native.prevent="deleteRow(scope.$index, infiledList)" size="small" 移除 /el-button 
 /template 
 /el-table-column 
 /el-table 
 /template 
 /el-form-item 
 /el-form 

2 数据定义部分

data () {
 return {
infiledList:[],
 fildt凡科抠图:[{text:'字符',value:'1'},{text:'数字',value:'2'}],
}

3 方法部分

methods: {
 deleteRow(index, rows) {//删除改行
 rows.splice(index, 1);
 addRow(tableData,event){
 tableData.push({ fildna: '',fildtp:'',remark:''
}

4 效果图展示


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持凡科。


(责任编辑:admin)
织梦二维码生成器
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
无法在这个位置找到: ajaxfeedback.htm
栏目列表
推荐内容


扫描二维码分享到微信