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>效果图：
先写到这里，老板提新需要了，回头再持续码。