vue中怎么实现可编辑table及其中加入下拉选项(table,vue,开发技术)

这篇“vue中怎么实现可编辑table及其中加入下拉选项”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“vue中怎么实现可编辑table及其中加入下拉选项”文章吧。

可编辑table及其中加入下拉选项

<template><div><el-table:data="tabledatas"border><el-table-columnlabel="姓名"><templateslot-scope="scope"><el-inputplaceholder="请输入内容"v-show="scope.row.show"v-model="scope.row.name"></el-input><spanv-show="!scope.row.show">{{scope.row.name}}</span></template></el-table-column><el-table-columnlabel="年龄"><templateslot-scope="scope"><el-inputplaceholder="请输入内容"v-show="scope.row.show"v-model="scope.row.age"></el-input><spanv-show="!scope.row.show">{{scope.row.age}}</span></template></el-table-column><el-table-columnlabel="地址"><templateslot-scope="scope"><el-inputplaceholder="请输入内容"v-show="scope.row.show"v-model="scope.row.address"></el-input><spanv-show="!scope.row.show">{{scope.row.address}}</span></template></el-table-column><el-table-columnlabel="学籍"><templateslot-scope="scope"><spanv-show="!scope.row.show">{{scope.row.stu}}</span><el-selectv-model="scope.row.stu"placeholder="请选择"v-show="scope.row.show"><el-optionv-for="iteminoptions":key="item.stu":label="item.stu":value="item.stu"></el-option></el-select></template></el-table-column><el-table-columnlabel="操作"><templateslot-scope="scope"><el-button@click="scope.row.show=true">编辑</el-button><el-button@click="scope.row.show=false">保存</el-button></template></el-table-column></el-table></div></template>

<script> exportdefault{ data(){ return{ options:[{ value:'选项1', stu:'初中' },{ value:'选项2', stu:'高中' },{ value:'选项3', stu:'大专' },{ value:'选项4', stu:'本科' },{ value:'选项5', stu:'博士' }], value:'', tabledatas:[ {name:'李一',age:'19',address:"宁波",stu:"本科",show:false}, {name:'郭明',age:'23',address:"四川",stu:"本科",show:false}, {name:'天天',age:'12',address:"海南",stu:"初中",show:false}, {name:'隆',age:'40',address:"上海",stu:"博士",show:false}, ], } }</script>

可以通过设置js里的show:true让该行处于默认编辑状态

出来效果图

vue表头下拉选择框使用总结

1.在el-table-culumn中，加入template标签

使用：

<templateslot="header"slot-scope="scope"><el-dropdowntrigger="click"@command="handleCommand"><span>类型</span><el-dropdown-menuslot="dropdown"><el-radio-groupv-model="sx">//这里，会出现一个bug，下文有解决办法<el-dropdown-itemcommand="属性0"><el-radiolabel="0">属性0</el-radio></el-dropdown-item><el-dropdown-itemcommand="属性1"><el-radiolabel="1">属性1</el-radio></el-dropdown-item><el-dropdown-itemcommand="属性2"><el-radiolabel="2">属性2</el-radio></el-dropdown-item><el-dropdown-itemcommand="属性3"><el-radiolabel="3">属性3</el-radio></el-dropdown-item><el-dropdown-itemcommand="属性4"><el-radiolabel="4">属性4</el-radio></el-dropdown-item><el-dropdown-itemcommand="属性5"><el-radiolabel="5">属性5</el-radio></el-dropdown-item><el-dropdown-itemcommand="属性6"><el-radiolabel="6">属性6</el-radio></el-dropdown-item></el-radio-group></el-dropdown-menu></el-dropdown></template><templateslot-scope="scope">（表中元素）</template>

2.设置handleCommand方法

（当时没使用handleCommand方法做缓冲，在刷新时，第一次刷新不会赋值，第二次刷新会得到上次刷新的值。）

handleCommand(command){if(command=='属性0'){this.sx='0'}elseif(command==='属性1'){this.sx='1'}elseif(command==='属性2'){this.sx='2'}elseif(command==='属性3'){this.sx='3'}elseif(command==='属性4'){this.sx='4'}elseif(command==='属性5'){this.sx='5'}elseif(command==='属性6'){this.sx='6'}this.刷新方法;},

但是在使用过程中，点击下拉框中数据时，会出现执行两次handleCommand()方法的情况。通过一天的询问与查找，得到解决办法。

问题出现在<el-radio>标签上，当点击框中数据时，数据响应一次handleCommand()方法，<el-radio>也会响应一次handleCommand()方法。

所以，应该去掉<el-radio>标签与<el-radio-group>标签。

<templateslot="header"slot-scope="scope"><el-dropdowntrigger="click"@command="handleCommand"><span>类型</span><el-dropdown-menuslot="dropdown"><el-dropdown-itemcommand="属性0">属性0</el-dropdown-item><el-dropdown-itemcommand="属性1">属性1</el-dropdown-item><el-dropdown-itemcommand="属性2">属性2</el-dropdown-item><el-dropdown-itemcommand="属性3">属性3</el-dropdown-item><el-dropdown-itemcommand="属性4">属性4</el-dropdown-item><el-dropdown-itemcommand="属性5">属性5</el-dropdown-item><el-dropdown-itemcommand="属性6">属性6</el-dropdown-item></el-dropdown-menu></el-dropdown></template><templateslot-scope="scope">（表中元素）</template>

以上就是关于“vue中怎么实现可编辑table及其中加入下拉选项”这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注亿速云行业资讯频道。