vue删除选框选中内容功能

图片说明图片说明

<el-card :body-style="{ padding: '0px' }">
          <img :src="item.url" class="image">

下面是新加的选框按钮,用element引入,还有就是用v-model绑定时,点击一个所有都会选中,搞不懂。
          <el-checkbox  class="check"></el-checkbox>

大佬求解答~~~ 我用axios获取json文件,然后渲染到页面上,现在想做一个删除功能,点击删除按钮删除多选框选中内容, 跪求回复~~~最好能上代码~

2个回答

我没看到不写的删除按钮 和 多选, 有什么不懂的可以直接到Element UI官网上看案例, 或者直接复制官网的案例到自己的项目上试一试 , 然后再慢慢的改成你想要的东西 , 这样有助于你对Element UI的认识; http://element-cn.eleme.io/#/zh-CN/component/checkbox

终于做好了,element的多选框多选用 :value="index" v-model="checked"绑定数组一直搞不好,
点一个其他的也跟着被选中,不知道是不是-vfor循环的原因,索性用普通的多选框来做,用 :value="index" v-model="checked"绑定数组后可以获取index的值,在数组中把它对应的列删掉就好,下面贴代码

  <img :src="item.url" class="image">
          <!--技术有限,只能换成普通多选框,其他不变
                     <input type="checkbox" :value="index" v-model="checked" class="check">

以下是功能按钮,删除键

```



  • 搜索


  • 导入


  • 分享


  • 删除



这是点击删除时绑定的函数

methods: {
remove(){
// this.checked
var aaa ;
//选项的值进行排序,否则顺序错乱
var $checked = this.checked.sort();
for (var i = $checked.length ; i > 0 ; i--) {
//长度-1是对应的下标
aaa = this.checked[i-1];
this.getData.splice(aaa,1);

    }
    //数组归零
    this.checked = [];
  },
},
大概就这样,新手编写,百度了很久自己调试了一早上才做好,一定注意多选框绑定的数组里的元素顺序,不排序的话...不信邪地孩子可以自己玩,
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问
相关内容推荐