vue中实现可编辑table及其中加入下拉选项
作者:等樱花的龙猫 发布时间:2024-04-10 10:24:51
标签: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>
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。
来源:https://blog.csdn.net/weixin_48508049/article/details/109360685
0
投稿
猜你喜欢
- 大概在2004年初的时候,我第一次买了一本很厚的书,名字或许叫《Dreamweaver MX从入门到精通》,很认真看着书并实践操作大约三分之
- 如下所示:from pandas_datareader import data, wbfrom datetime import dateti
- Asp定时执行操作、Asp定时读取数据库(网页定时操作详解)'----------------------版权信息---------
- 方法一一、桌面右击,点击“Git Bash Here”二、在弹出的黑窗口,右击,选择&ldq
- 本文实例为大家分享了js实现贪吃蛇游戏的具体代码,供大家参考,具体内容如下两个小时完成的,有点简陋。直接看效果。打开调试面板,在resour
- 一行命令搭建一个基于python的http文件传输服务由于今天朋友想要一个文件,而我恰好有,因为这个文件比较大,网速不是很给力,所以想到了p
- 尽管甲骨文收购Sun交易尚在等待最终结果,业界对开源数据库MySQL的未来命运也十分担忧,但Sun的开发者依然在继续努力研发该开源数据库。他
- 步骤1:关闭MySQL服务右击【计算机】,选择【管理】,打开“计算机管理”界面选择【服务和应用程序】
- 前言正则表达式的基础知识就不说了,有兴趣的可以点击这里,提取一般分两种情况,一种是提取在文本中提取单个位置的字符串,另一种是提取连续多个位置
- 详解 Python中LEGB和闭包及装饰器LEGB L>E>G?BL:local函数内部作用域E:enclosing函数内部与内
- 表单在网页中主要负责数据采集功能。一个表单有三个基本组成部分: 表单标签:这里面包含了处理表单数据所用CGI程序的URL以及数
- 题目要求1.后台管理员只有一个用户:admin, 密码: admin2.当管理员登陆成功后,可以管理前台会员信息。3.会员信息管
- 先看map()函数底层封装介绍:注释中翻译为:map(func, *iterables)——> map对象创建一个迭代器,使用来自的参
- 本文主要向大家介绍的是正确优化SQL Server数据库的经验总结,其中包括在对其进行优化的实际操作中值得大家注意的地方描述,以及对SQL语
- 使用 pyInstaller 将 python 程序生成可直接运行的程序,这个exe程序就可以在Windows 或 Ma
- 本文实例为大家分享了js实现放大镜效果的具体代码,供大家参考,具体内容如下该放大区域用背景图片放大<!DOCTYPE html>
- 目前,在使用python处理一个nc文件绘制一个风场图时,出现了以下报错虽然图片画出来了,但是很丑而且没有理想的填充颜色!但是不知道为啥,但
- 前言在CSDN发的第一篇文章,时隔两年,终于实现了爬微博的自由!本文可以解决微博预登录、识别“展开全文”并爬取完整数据、翻页设置等问题。由于
- 由于在模型训练的过程中存在大量的随机操作,使得对于同一份代码,重复运行后得到的结果不一致。因此,为了得到可重复的实验结果,我们需要对随机数生
- 本文我们来做一个简单的随机漫步数据图,进一步了解matplotlib的使用,使用Python生成随机漫步数据,再使用matplotlib绘制