vue中怎么实现可编辑table及其中加入下拉选项
这篇“vue中怎么实现可编辑table及其中加入下拉选项”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“vue中怎么实现可编辑table及其中加入下拉选项”文章吧。
可编辑table及其中加入下拉选项
<template>
<div>
<el-table :data="tabledatas" border>
<el-table-column label="姓名">
<template slot-scope="scope">
<el-input placeholder="请输入内容" v-show="scope.row.show" v-model="scope.row.name"></el-input>
<span v-show="!scope.row.show">{{scope.row.name}}</span>
</template>
</el-table-column>
<el-table-column label="年龄">
<template slot-scope="scope">
<el-input placeholder="请输入内容" v-show="scope.row.show" v-model="scope.row.age"></el-input>
<span v-show="!scope.row.show">{{scope.row.age}}</span>
</template>
</el-table-column>
<el-table-column label="地址">
<template slot-scope="scope">
<el-input placeholder="请输入内容" v-show="scope.row.show" v-model="scope.row.address"></el-input>
<span v-show="!scope.row.show">{{scope.row.address}}</span>
</template>
</el-table-column>
<el-table-column label="学籍">
<template slot-scope="scope">
<span v-show="!scope.row.show">{{scope.row.stu}}</span>
<el-select v-model="scope.row.stu" placeholder="请选择" v-show="scope.row.show" >
<el-option
v-for="item in options"
:key="item.stu"
:label="item.stu"
:value="item.stu">
</el-option>
</el-select>
</template>
</el-table-column>
<el-table-column label="操作">
<template slot-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>
export default {
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标签
使用：
<template slot="header" slot-scope="scope"> <el-dropdown trigger="click" @command = "handleCommand"> <span>类型</span> <el-dropdown-menu slot="dropdown"> <el-radio-group v-model="sx">//这里，会出现一个bug，下文有解决办法 <el-dropdown-item command="属性0"><el-radio label="0">属性0</el-radio> </el-dropdown-item> <el-dropdown-item command="属性1"><el-radio label="1">属性1</el-radio> </el-dropdown-item> <el-dropdown-item command="属性2"><el-radio label="2">属性2</el-radio> </el-dropdown-item> <el-dropdown-item command="属性3"><el-radio label="3">属性3</el-radio> </el-dropdown-item> <el-dropdown-item command="属性4"><el-radio label="4">属性4</el-radio> </el-dropdown-item> <el-dropdown-item command="属性5"><el-radio label="5">属性5</el-radio> </el-dropdown-item> <el-dropdown-item command="属性6"><el-radio label="6">属性6</el-radio> </el-dropdown-item> </el-radio-group> </el-dropdown-menu> </el-dropdown> </template> <template slot-scope="scope">（表中元素）</template>
2.设置handleCommand方法
（当时没使用handleCommand方法做缓冲，在刷新时，第一次刷新不会赋值，第二次刷新会得到上次刷新的值。）
handleCommand(command) {
if(command == '属性0' ){
this.sx= '0'
} else if (command === '属性1') {
this.sx = '1'
} else if( command === '属性2') {
this.sx = '2'
} else if (command === '属性3') {
this.sx = '3'
} else if (command === '属性4') {
this.sx = '4'
} else if( command === '属性5') {
this.sx = '5'
} else if (command === '属性6') {
this.sx = '6'
}
this.刷新方法;
},但是在使用过程中，点击下拉框中数据时，会出现执行两次handleCommand()方法的情况。通过一天的询问与查找，得到解决办法。
问题出现在<el-radio>标签上，当点击框中数据时，数据响应一次handleCommand()方法，<el-radio>也会响应一次handleCommand()方法。
所以，应该去掉<el-radio>标签与<el-radio-group>标签。
<template slot="header" slot-scope="scope"> <el-dropdown trigger="click" @command = "handleCommand"> <span>类型</span> <el-dropdown-menu slot="dropdown"> <el-dropdown-item command="属性0">属性0</el-dropdown-item> <el-dropdown-item command="属性1">属性1</el-dropdown-item> <el-dropdown-item command="属性2">属性2</el-dropdown-item> <el-dropdown-item command="属性3">属性3</el-dropdown-item> <el-dropdown-item command="属性4">属性4</el-dropdown-item> <el-dropdown-item command="属性5">属性5</el-dropdown-item> <el-dropdown-item command="属性6">属性6</el-dropdown-item> </el-dropdown-menu> </el-dropdown> </template> <template slot-scope="scope">（表中元素）</template>
以上就是关于“vue中怎么实现可编辑table及其中加入下拉选项”这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注蜗牛博客行业资讯频道。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：niceseo99@gmail.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
版权声明：如无特殊标注，文章均为本站原创，转载时请以链接形式注明文章出处。
评论