- 安装Sortable
npm install sortablejs --save
- 引入Sortable
import Sortable from 'sortablejs'
- 添加列拖拽方法
//列拖拽
columnDrop() {
const wrapperTr = document.querySelector('.el-table__header-wrapper tr')
this.sortable = Sortable.create(wrapperTr, {
animation: 180,
delay: 0,
onEnd: evt => {
const oldItem = this.dropCol[evt.oldIndex]
this.dropCol.splice(evt.oldIndex, 1)
this.dropCol.splice(evt.newIndex, 0, oldItem)
}
})
}
- 拼装表单列数据
getDropCol(){
if(this.orders&&this.orders.hasOwnProperty('device')){
let data=JSON.parse(this.orders['device'])
return data
}
return this.getCol()
},
getCol() {
let allCols = [
{prop: "select", label: "选择"},
{prop: "index", label: "序号"},
{prop: "name", label: "设备型号"},
{prop: "cluster.name", label: "集群",type:"cluster"},
{prop: "type", label: "服务器分类"},
{prop: "sn", label: "设备序列号"},
{prop: "manageIp", label: "管理网"},
{prop: "illoIp", label: "ILLO地址"},
{prop: "period", label: "期数"},
{prop: "position", label: "机架位置"},
{prop: "publicIp", label: "公网"},
{prop: "cn2Ip", label: "CN2"},
{prop: "outIp", label: "存储外网"},
{prop: "systemVersion", label: "系统版本"},
{prop: "osVersion", label: "内核版本"},
{prop: "use", label: "用途"},
{prop: "deliveryDate", label: "交付日期",type:"date"},
{prop: "useUser", label: "申请人"},
{prop: "tag", label: "项目名称"},
{prop: "remarks", label: "备注"},
{prop: "computerPosition", label: "机房位置"},
]
if (this.cols && this.cols.hasOwnProperty('device')) {
if (this.cols['device'] === "") {
return allCols;
}
let str = this.cols['device'];
let data = this.utils.str2Arr(str);
let result=[]
result.push({prop: "select", label: "选择"})
result.push({prop: "index", label: "序号"})
data.forEach(function (item) {
allCols.forEach(function (col) {
if (col.prop === item) {
result.push(col);
}
})
})
return result;
} else {
return allCols;
}
},
注:我这里因为配合后端保存了顺序而且支持了列是否显示的功能,所以需要检索this.orders,如果不需要可以直接使用this.gelCol()
- 初始化页面时,初始化列数据
mounted() {
this.columnDrop()
this.col=this.getDropCol();
this.dropCol=this.getDropCol();
},
- v-for生成表格
<el-table-column
type="selection"
width="55">
</el-table-column>
<el-table-column type="index" align="center" width="50">
</el-table-column>
<el-table-column v-for="(item, index) in col"
v-if="col[index].prop!=='select'&&col[index].prop!=='index'"
align="center"
show-overflow-tooltip
width="200px"
:key="`col_${index}`"
:prop="dropCol[index].prop"
:label="item.label">
<template slot-scope="scope">
<span>{
{ !dropCol[index].type?scope.row[dropCol[index].prop]:getValue(scope.row,dropCol[index].type),dropCol[index].prop }}</span>
</template>
</el-table-column>
<el-table-column label="操作" align="center" fixed="right" width="200" class-name="small-padding fixed-width">
<template slot-scope="scope">
<el-dropdown trigger="hover">
<span class="el-dropdown-link">
操作菜单<i class="el-icon-arrow-down el-icon--right"></i>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item class="el-dropdown-link" @click.native="cpuInfo(scope.row)">硬件信息</el-dropdown-item>
<!-- <el-dropdown-item class="el-dropdown-link" @click.native="memoryInfo(scope.row)">内存信息</el-dropdown-item>-->
<!-- <el-dropdown-item class="el-dropdown-link" @click.native="nicInfo(scope.row)">网卡信息</el-dropdown-item>-->
<!-- <el-dropdown-item class="el-dropdown-link" @click.native="diskInfo(scope.row)">硬盘信息</el-dropdown-item>-->
<el-dropdown-item class="el-dropdown-link" @click.native="historyInfo(scope.row)">历史变更</el-dropdown-item>
<el-dropdown-item class="el-dropdown-link" @click.native="editDevice(scope.row)">编辑资产</el-dropdown-item>
<el-dropdown-item class="el-dropdown-link" @click.native="deleteDevice(scope.row)">删除资产</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</template>
</el-table-column>
</el-table>
我这里配合type来对特殊字段进行了处理,使用了getValue的方法实现的,好像也可以用v-if来做(毕竟不是专业前端,随便来了= =)
整页代码(非纯前端,有些粗糙见谅= =):
<template>
<div class="app-container">
<div class="filter-container">
<el-input v-model="listQuery.cluster" clearable placeholder="请输入所属集群" style="width: 200px;"
class="filter-item"
@keyup.enter.native="handleFilter"/>
<el-input v-model="listQuery.outIp" clearable placeholder="请输入存储外网IP" style="width: 200px;"
class="filter-item"
@keyup.enter.native="handleFilter"/>
<el-button type="primary" plain @click="handleFilter" class="filter-item">搜索</el-button>
<el-button type="primary" plain @click="createDevice" class="filter-item">创建资产</el-button>
<el-button type="primary" plain @click="changeCols" class="filter-item">修改显示列</el-button>
<el-button type="primary" plain @click="add