数据动态添加和取消，以及排序

最新推荐文章于 2023-07-05 10:11:48 发布

小时_sqe

最新推荐文章于 2023-07-05 10:11:48 发布

阅读量343

点赞数

分类专栏： js 数组删除、添加、排序文章标签： vue.js html5 html es6 javascript

本文链接：https://blog.csdn.net/weixin_38355349/article/details/103671412

版权

本文介绍了一个使用Vue.js实现的功能：通过点击箭头在左右两个框间动态添加和删除字段，并且已选字段能通过按钮进行上下排序。项目依赖于bootstrap-vue库，通过npm安装并引入Vue和Bootstrap-Vue实现组件功能。

摘要由CSDN通过智能技术生成

在这里插入图片描述
需求描述：
1.左右两个框里的字段选中后点击箭头可以添加到对侧框里，被选中的框里相应的字段删除；
2.已经选好的list点击上下button 能够进行选中的字段上下排序；

项目依赖使用了 bootstrap-vue https://bootstrap-vue.js.org；
安装
npm install vue bootstrap-vue bootstrap
或
npm install vue bootstrap-vue

引用
import Vue from ‘vue’
import BootstrapVue from ‘bootstrap-vue’

Vue.use(BootstrapVue)
ok,直接上vue 组件


<template>
    <div style="width: 90%;margin:10px auto ;">
        <b-button pill variant="primary" size="sm" @click="fieldCustom">
           点击
        </b-button>
        <b-modal id="custom-modal" ref="customodal" scrollable size="lg" title="Custom Table Fields">
            <b-container fluid>
                <b-row style="padding: 1rem 1rem 0rem 1rem;" class="justify-content-sm-center">
                    <b-col sm="5">
                        <h6>All fields</h6>
                    </b-col>
                    <b-col sm="1"></b-col>
                    <b-col sm="5">
                        <h6>Selected fields to display</h6>
                    </b-col>
                </b-row>
                <b-row style="padding: 0rem 1rem