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
投稿
猜你喜欢
- 前言最近不是快过年了,Python写对联挺火的,但是代码又不是人人都用,那就直接写个界面打包一下呗~主要实现只要运行后输入上联下联、横批,然
- 本文实例讲述了Python写入CSV文件的方法。分享给大家供大家参考。具体如下:# _*_ coding:utf-8 _*_#xiaohei
- 最近想把word密码文件的服务器密码信息归档到mysql数据库,心想着如果直接在里面写明文密码会不会不安全,如果用sha这些不可逆的算法又没
- 如下所示:BaseException +-- SystemExit +-- KeyboardInterrupt +-- GeneratorE
- 0.引言利用python开发,借助Dlib库进行人脸识别,然后将检测到的人脸剪切下来,依次排序显示在新的图像上;实现的效果如下图所示,将图1
- 一、介绍Django特点:具有完整的封装,开发者可以高效率的开发项目,Django将大部分的功能进行了封装,开发者只需要调用即可,如此,大大
- 一、遇到的问题在向数据库中存入汉字时遇到这样的问题:Cause: java.sql.SQLException: Incorrect stri
- 本文为大家分享了卸载oracle11g的详细教程,供大家参考,具体内容如下准备工作:关闭防火墙,关闭杀毒软件1、win+R 输入servic
- 1,登录后默认自动选中My Objects 默认情况下,PLSQL Developer登录后,Brower里会选择All objects,如
- <%@LANGUAGE="VBSCRIPT" CODEPAGE="936"%>
- 本文通过Python3+PyQt5实现《python Qt Gui 快速编程》这本书13章程序Rich文本的行编辑,可以通过鼠标右键选择对文
- 思路:利用time函数返回的时间字符串与指定时间字符串做比较,相等的时候执行对应的操作。不知道大家的思路是什么,感觉这样比较耗CPU。。。。
- 前言大家应该都有所了解,下面就简单介绍下Numpy,NumPy(Numerical Python)是一个用于科学计算第三方的Python包。
- 各位想必都知道,onfocus="this.blur()"这条代码能消除链接时的虚线框,但你有没有想过,如果你的网页上有
- 进程的概念程序是没有运行的代码,静态的;进程是运行起来的程序,进程是一个程序运行起来之后和资源的总称;程序只有一个,但同一份程序可以有多个进
- 1、打开文件得到文件句柄并赋值给一个变量2、通过句柄对文件进行操作3、关闭文件示例文件'你好呀'我是于超嗯再见文件操作基本流
- decode()方法使用注册编码的编解码器的字符串进行解码。它默认为默认的字符串编码。语法以下是decode()方法的语法:st
- 在自动化中, Selenium 自动化测试中有一个名字经常被提及 PageObject( 思想与面向对象的特征相 同 ) ,通常 PO 模型
- CSS网页布局开发中,会有很多小技巧,这里再扩展一下您所想要得到的知识,相信您会有很多收获!一、ul标签在Mozilla中默认是有paddi
- SQL Server2005数据项的分拆与合并:参考示例如下:-- ====================================