关于vue.js:vue-几乎都会用到的组件库

element：https://element.eleme.cn/#/zh-CN
没什么好说的

echarts：https://echarts.apache.org/zh/index.html
也没社么好说的，做过图表的都用过啊吧

vxe-table: https://vxetable.cn/#/table/start/install
组件的确要比 element 功能强大，然而官网文档写的不如 element 友善，常常有指令或属性找不到，示例也不是很残缺。

draggable: https://github.com/SortableJS/Vue.Draggable
能够用鼠标间接拖动的穿梭框，能够实现的成果比 element 不要难看太多
中文文档能够参照：https://www.itxst.com/vue-draggable/tutorial.html
代码片段示例：

        <!-- 左侧穿梭框 -->
        <el-col :span="12">
          <div class="groupbox">
            <div class="title">
              <el-col :span="12"> 姓名 </el-col>
              <el-col :span="12"> 职务 </el-col>
            </div>
            <div class="listBody">
              <draggable v-model="leftarr" group="itxst" dragClass="dragClass" ghostClass="ghostClass" chosenClass="chosenClass">
                <transition-group class="groutminheight">
                    <div class="item" v-for="item in leftarr" :key="item.name">
                      <el-row>
                        <el-col :span="12">{{item.name}}</el-col>
                        <el-col :span="12">{{item.post}}</el-col>
                      </el-row>
                    </div>
                </transition-group>
              </draggable>
            </div>
          </div>
        </el-col>
        <!-- 右侧穿梭框 -->
        <el-col :span="12">
          <div class="groupbox">
            <div class="title">
              <el-col :span="12"> 姓名 </el-col>
              <el-col :span="12"> 职务 </el-col>
            </div>
            <div class="listBody">
              <draggable v-model="reartarr" group="itxst" dragClass="dragClass" ghostClass="ghostClass" chosenClass="chosenClass">
                <transition-group class="groutminheight">
                  <div class="item" v-for="item in reartarr" :key="item.name">
                    <el-row>
                        <el-col :span="12">{{item.name}}</el-col>
                        <el-col :span="12">{{item.post}}</el-col>
                    </el-row>
                  </div>
                </transition-group>
              </draggable>
            </div>
          </div>
        </el-col>

<style>


// 定义穿梭框款式
.ghostClass {background-color: blue !important;}
// 鼠标选中后的色彩
.chosenClass {
  background-color: #2DF67D !important;
  opacity: 1 !important;
}
// 拖动时的款式
.dragClass {
  background-color: greenyellow !important;
  opacity: 1 !important;
  box-shadow: none !important;
  outline: none !important;
  background-image: none !important;
}
// 包含题目合列表的容器盒子
.groupbox{
  margin:20px;
  padding: 10px;
  background:linear-gradient(to top,rgba(65,216,147,0.3) 0%,rgba(65,216,147,0.7) 50%, rgba(65,216,147,0.3) 100%);
  display:flex;
  flex-direction: column;
}
// 题目
.title{
  font-size: 18px;
  height: 35px;
  margin-left: 20px;
  margin-right:20px;
  margin-bottom: 8px;
  top:0px;
  flex: 0 0 35px;
}
// 列表容器盒子
.listBody{
  flex:1 1 200px;
  overflow: auto;
}
// 列表
.groutminheight{
  overflow: auto;
  display: block;
  min-height:100px;
}

// 暗藏滚动条
::-webkit-scrollbar {display: none; /* Chrome Safari */}

.item {
  padding: 6px 12px;
  margin: 0px 10px 0px 10px;
  background-color: #f1f1f1;
  border-radius: 15px;
}
.item:hover {
  background-color: #fdfdfd;
  cursor: move;
}
.item + .item {
  border-top: none;
  margin-top: 6px;
}
</style>

效果图：

先写到这里，老板提新需要了，回头再持续码。