vue做一个上移和下移,删除的li功能(代码片段)

panax panax     2022-12-16     117

关键词:

效果图:

技术图片

思路就是冒泡原理,把数据放到一个空数组,对其进行排序, 单选框用到的是iview 。

具体实现代码:

 <div v-for="item in singledLists" :key="item.index" >   // 数组singledLists
            <Checkbox @on-change="checkSingle" :disabled="isDisabled" v-model="item.isRight" class="mb10" >
                <Input  :value="item.content" v-model="item.content" style="width: 300px;marginLeft:.4rem;" />   // item.content 动态设置input
            </Checkbox>
            <span style="cursor:pointer;" @click="moveUp(item)">上移</span>
            <span style="cursor:pointer;" @click="moveDown(item)">下移</span>
            <span style="cursor:pointer;" @click="singleAnswerDelete(item)">删除</span>
</div>
<div class="ml30"><Button class=‘newColor‘ @click="addSingleAnswer" :class="‘hideButton‘:isShow" type="primary">添加选项</Button></div>  // hideButtondispaly:none 控制显示和隐藏 ,isShow:false ;

 // 添加

// 添加答案选项
        addSingleAnswer() 
          let _this = this;
          _this.singledLists.push();   // 置空
          if (_this.questionStyle === "single") 
            if (_this.singledLists.length >= 4) 
              _this.isShow = true; //隐藏按钮添加选项  
              _this.$Message.info("单选题最多添加四个选项!");
            
           else if (_this.questionStyle === "multi") 
            if (_this.singledLists.length >= 6) 
              _this.isShow = true; //隐藏按钮添加选项
              _this.$Message.info("多选题最多添加六个选项!");
            
          
        ,

 

 技术图片

// 以B为基点上移 (根据index值)
moveUp(item) console.log(item) console.log(
this.singledLists) let index = this.singledLists.indexOf(item); // 获取的index。或者通过v-for 遍历传过的index,可以简化此步骤。 if (this.singledLists.length > 1 && index !== 0) var temp = this.singledLists[index - 1].content; // 这三行的含义可见上面示意图 this.singledLists[index - 1].content = this.singledLists[index].content; this.singledLists[index].content = temp; ,

      技术图片
// 下移
        moveDown(item) 
          let index = this.singledLists.indexOf(item);
          if( this.singledLists.length > 1 && index != this.singledLists.length - 1 ) 
            var temp = this.singledLists[index + 1].content;     // 以c为基点
            this.singledLists[index + 1].content = this.singledLists[index].content;
            this.singledLists[index].content = temp;
          
        ,
        // 删除
        singleAnswerDelete(item) 
          this.isShow = false;
          let index = this.singledLists.indexOf(item);
          if (index > -1) 
            this.singledLists.splice(index, 1);
          
        ,

 

lind.ddd.domain.isortbehavor~上移与下移

...据库中,对于上移与下移的设计,大叔在LIND.DDD.DOMAIN里有一个ISortBehavor接口,主要是说,如果实体对象支持排序功能,可以实现这个接口,而在扩展库中,将有为本地结果集动态排序(上移和下移)的方法,这个设计类似于ABP项... 查看详情

TableView - 单元格的上移和下移功能

...tyofacell【发布时间】:2015-05-0509:18:07【问题描述】:我有一个TableView的情况。我正在尝试实现一个允许向上或向下移动单元格的功能。向上或向下移动单元格(带有单元格内容)后,我想将焦点更改为单元格的新位置。问题是它... 查看详情

上移下移扩展版总结(代码片段)

...点击上移就将当前的按钮的父级上移一位 2)当点击第一个时候将当前按钮的父级移动到最后一位 3)当点击最后一个时候将当前按钮的父级移动到首位4)带过渡动画 需求分析:下移:剪切所点击的条目插入到下一条目... 查看详情

请教jquery对表格的行操作的。对页面表格进行上下移动位置,删除记录的操作。谢谢。如下补充

型号厂商数量封装批号供应商单价操作asdf原装asdf0123上移下移删除model004原装asdasda011上移下移删除model001信息技术原装dasdas025上移下移删除model002信息技术原装dasdas026上移下移删除model003信息技术原装dasdas011上移下移删除asdasd原装... 查看详情

jqgrid上移下移单元格(代码片段)

...表中的行数保存到数据库中,取数据时按行进行排序1、上移,下移按钮<ahref="javascript:void(0)"onclick="operateWithOneRowById(up)"class="linkButton">上移</a><ahref="javascript:void(0)" 查看详情

我现在要做一个手工排序,将表格里的行进行上移和下移,js等的页面功能都已完成,但是我不知道怎样入库

你试试这个是否可以:<title>JS表格排序</title><scripttype="text/javascript">vartableSort=;(function()varoTable=;varcellStatus=;varsortCells=;varlimit=;var$=function(id)returndocument.getElementById(id);varobjKeyExists=function(key,search)if(typeofkey!='nu... 查看详情

使用jquery实现option的上移和下移

...      (2)判断当前元素是否为第一个元素      (3)如果是,则不执行上移操作,如果不是,则则调用insertBefore方法插入到他的prev(紧邻的上一个)元素之前1varup=function 查看详情

在PyQt5中上下移动行[重复]

...uplicate]【发布时间】:2020-08-1200:41:36【问题描述】:考虑一个QTableWidget和两个按钮“上移”和“下移”。点击上移,当前行应该上移一行,类似于“下移”。实现相应的上移和下移功能最简单的方法是什么?或者是否可以将此sn-... 查看详情

元素的上移下移等排序操作

...项目中,我经常遇到对元素进行排序操作的需求,包括:上移、下移、置顶、置底。那么这些操作如何实现呢? 上移,简言之就是将需要上移的元素和它前面元素交换位置,使用insertBefore(),大致思路为:vardom=需要上移的元... 查看详情

vim使用方法和命令描述(代码片段)

...xt如果当前目录下有denghb.txt文件则是编辑,不存在则新建一个文件普通模式执行上方的命令后什么不都操作,按以下键对应功能按键描述k光标上移,按方向键(↑)也是一样10k光标上移10个字符,10可以是任意整数j光标下移,按... 查看详情

js实现数组内数据的上移和下移

varswapItems=function(arr,index1,index2){  arr[index1]=arr.splice(index2,1,arr[index1])[0]  returnarr}vararr=[1,2,3]varnewArr=[]upData(arr,index){  if(this.arr.length>1&&index!==0){    newA 查看详情

jquery实现table动态添加行删除行以及行的上移和下移

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""http://www.w3.org/TR/html4/strict.dtd"><html><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"><title></title><scriptsrc="http://code.jquery.com/jquery-1.8.3.min.js"></script>... 查看详情

js数组移动上移下移置顶置底,vue实现表格上下移动置底置顶

...的元素index2是准备移动到的位置往下移就是index2=index+1往上移动就是index2=index+1;这个也可以在页面试试那个方法就指导了,但是置顶和置底还有点差别*/varswapItems=function(arr,index1,index2,direction){if 查看详情

phpmysql排序上移下移

...般按id,,,默认是后入先出,,,新闻排序,你可以见一个排序字段,比如MyOrder,数字类型,,然后MyOrder默认都是1,,然后搜索的时候orderbyMyOrderandtime就行了。然后你排序时改这个order值就行了。。。。参考技术A你好,教程... 查看详情

table中实现数据上移下移效果

html由于vue+Element项目中的table,没有开放的上移下移的api,但是能对数据操作,故思路为数组中的一条数据,再重新添加一条数据,办法有点笨,但是好歹也是实现了,望有好的办法的,请留言<el-table:data="tableData"style="width:100%"&... 查看详情

vue学习之todolist删除功能(代码片段)

...ue中进行注册组件和实例之间的关系1、每个组件都是vue的一个实例2、父组件向子组件传值 查看详情

vim(代码片段)

...指定字符串搜索时忽略大小写:seticn搜索指定字符串的下一个出现位置:%s/old/new/g全文替换指定字符串:n1,n2s/old/new/g在一定范围内替换指定字符串 配置文件vimrc 在~/.vimrc文件中配置(如无此文件,则手动创建)setnu    ... 查看详情

特殊功能集合(代码片段)

...持续的时间和滚动手势的强烈程度成正比。同时也会创建一个新的堆栈上下文。下面是兼容安卓和iOS的写法over-flow:auto;/*winphone 查看详情