elementui表格的列拖拽及动态显示列实现

淡淡的烟草味﹌ 2023-06-07 10:57 405阅读 0赞

1.  安装Sortable

npm install sortablejs --save

1.  引入Sortable

import Sortable from 'sortablejs'

1.  添加列拖拽方法

//列拖拽
    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)
            }
        })
    }

1.  拼装表单列数据

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()

1.  初始化页面时，初始化列数据

mounted() {
                this.columnDrop()
                this.col=this.getDropCol();
                this.dropCol=this.getDropCol();
            },

1.  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="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="addHs" class="filter-item">添加历史变更</el-button>
          <el-button type="primary" plain @click="saveOrder" class="filter-item">保存显示顺序</el-button>
          <el-upload
            :action="deviceUrl"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            style="margin-top: 5px;"
          >
            <el-button size="small" type="primary">导入</el-button>
          </el-upload>
    
        </div>
        <el-table
          v-loading="listLoading"
          :data="list"
          border
          fit
          size="mini"
          :row-class-name="rowClassName"
          :cell-class-name="cellClassName"
          highlight-current-row
          style="width: 100%;margin-top: 20px"
          @selection-change="handleSelectionChange"
        >
          <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="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>
        <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit"
                    @pagination="getList"/>
    
        <el-dialog title="Device管理" :visible.sync="dialogFormVisible" :close-on-click-modal=false>
          <el-form :model="temp" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="集群" prop="cluster">
              <el-select v-model="temp.clusterId" placeholder="请选择">
                <el-option
                  v-for="item in clusterList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="设备型号" prop="name">
              <el-input v-model="temp.name"></el-input>
            </el-form-item>
            <el-form-item label="期数" prop="period">
              <el-input v-model="temp.period"></el-input>
            </el-form-item>
            <el-form-item label="管理网" prop="manageIp">
              <el-input v-model="temp.manageIp"></el-input>
            </el-form-item>
            <el-form-item label="ILLO地址" prop="cluster">
              <el-input v-model="temp.illoIp"></el-input>
            </el-form-item>
            <el-form-item label="交付日期" prop="deliveryDate">
              <el-date-picker
                v-model="temp.deliveryDate"
                type="date"
                placeholder="选择日期">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="服务器分类" prop="type">
              <el-input v-model="temp.type"></el-input>
            </el-form-item>
            <el-form-item label="设备类型" prop="deviceType">
              <el-select v-model="temp.deviceType" placeholder="请选择">
                <el-option
                  v-for="item in deviceTypeList"
                  :key="item.deviceType"
                  :label="item.nameZh"
                  :value="item.deviceType">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="设备序列号" prop="sn">
              <el-input v-model="temp.sn"></el-input>
            </el-form-item>
            <el-form-item label="项目名称" prop="tag">
              <tag-select type="program" :value.sync="temp.tag"></tag-select>
            </el-form-item>
            <el-form-item label="机架位置" prop="position">
              <el-input v-model="temp.position"></el-input>
            </el-form-item>
            <el-form-item label="机房位置" prop="computerPosition">
              <el-input v-model="temp.computerPosition"></el-input>
            </el-form-item>
            <el-form-item label="公网" prop="publicIp">
              <el-input v-model="temp.publicIp"></el-input>
            </el-form-item>
            <el-form-item label="存储外网" prop="inIp">
              <el-input v-model="temp.outIp"></el-input>
            </el-form-item>
            <el-form-item label="CN2" prop="cn2Ip">
              <el-input v-model="temp.cn2Ip"></el-input>
            </el-form-item>
            <el-form-item label="系统版本" prop="systemVersion">
              <el-input v-model="temp.systemVersion"></el-input>
            </el-form-item>
            <el-form-item label="内核版本" prop="osVersion">
              <el-input v-model="temp.osVersion"></el-input>
            </el-form-item>
            <el-form-item label="用途" prop="use">
              <el-input v-model="temp.use"></el-input>
            </el-form-item>
            <el-form-item label="备注" prop="remarks">
              <el-input v-model="temp.remarks"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="saveDevice('ruleForm')">提交</el-button>
            <el-button @click="resetDeviceForm('ruleForm')">取消</el-button>
          </div>
        </el-dialog>
        <el-dialog title="硬件信息" :visible.sync="CPUVisible" width="80%">
          <el-collapse v-model="collapse">
            <el-collapse-item title="CPU信息" name="1">
              <cpu :device_type.sync="deviceType"></cpu>
            </el-collapse-item>
            <el-collapse-item title="内存信息" name="2">
              <memory :device_type.sync="deviceType"></memory>
            </el-collapse-item>
            <el-collapse-item title="硬盘信息" name="3">
              <disk :device_type.sync="deviceType"></disk>
            </el-collapse-item>
            <el-collapse-item title="网卡信息" name="4">
              <nic :device_type.sync="deviceType"></nic>
            </el-collapse-item>
          </el-collapse>
        </el-dialog>
        
        
        
        
        
        
        
        
        
        <el-dialog title="历史变更" :visible.sync="HistoryVisible" width="80%">
          <el-button type="primary" @click="addHistory" style="margin-bottom: 5px">添加历史变更</el-button>
          <el-timeline>
            <el-timeline-item v-for="item in history"
                              :key="item.id"
                              :timestamp="getDateTime(item.createDate)" placement="top">
              <el-card>
                <h4>{
       {item.message}}</h4>
                <p>XXX 提交于 {
       {getDateTime(item.createDate)}}</p>
              </el-card>
            </el-timeline-item>
          </el-timeline>
        </el-dialog>
    
        <el-dialog title="显示列编辑" :visible.sync="changeVisible" width="80%">
          <el-transfer v-model="colsList" :data="changeData" :titles="['所有列', '显示列']" :props="{key: 'value',label: 'desc'}"
          ></el-transfer>
          <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="saveCols()">提交</el-button>
            <el-button @click="changeVisible=false">取消</el-button>
          </div>
        </el-dialog>
      </div>
    </template>
    
    <script>
    
        import Sortable from 'sortablejs'
        import Pagination from '@/components/Pagination'
        import {fetchList, createDevice, modifyDevice, deleteDevice, addHistory, addHistories} from '@/api/device' // Secondary package based on el-pagination
        import {findAllDeviceType} from '@/api/devicetype'
        import {findAllCluster} from '@/api/cluster'
        import {saveColsInfo,saveOrders} from '@/api/userInfo'
        import cpu from '@/components/cpu'
        import Memory from "../../components/memory/index";
        import Disk from "../../components/disk/index";
        import Nic from "../../components/nic/index";
        import TagSelect from "../../components/TagSelect/index";
        import moment from "moment"
        import {mapGetters} from 'vuex'
    
        export default {
            name: 'Device',
            computed: {
                ...mapGetters([
                    'cols',
                    'orders'
                ])
            },
            components: {Disk, Memory, Pagination, cpu, Nic, TagSelect},
            data() {
                return {
                    col: [],
                    dropCol: [],
                    rowClassName: "rowClass",
                    cellClassName: "cellClass",
                    deviceUrl: process.env.BASE_API + "/excel/device",
                    collapse: ["1", "2", "3", "4"],
                    CPUVisible: false,
                    MemoryVisible: false,
                    DiskVisible: false,
                    NicVisible: false,
                    HistoryVisible: false,
                    changeVisible: false,
                    colsList: [],
                    history: [],
                    history_deviceId: null,
                    deviceType: null,
                    temp: {
                        id: null,
                        name: null,
                        clusterId: null,
                        use: null,
                        deliveryDate: null,
                        type: null,
                        manageIp: null,
                        illoIp: null,
                        period: null,
                        remarks: null,
                        deviceType: null,
                        sn: null,
                        tag: null,
                        isDel: null,
                        position: null,
                        useUser: null,
                        startDate: null,
                        systemVersion: null,
                        osVersion: null,
                        outIp: null,
                        publicIp: null,
                        cn2Ip: null,
                        computerPosition: null
                    },
                    list: null,
                    total: 0,
                    listLoading: true,
                    listQuery: {
                        page: 1,
                        limit: 20,
                        cluster: null,
                        outIp: null
                    },
                    dialogFormVisible: false,
                    editFlag: 0,
                    rules: {
                        // cn2Ip: [
                        //     {required: true, message: '请输入cn2ip', trigger: 'blur'}
                        // ],
                    },
                    deviceTypeList: [],
                    clusterList: [],
                    changeData: [
                        {value: "name", desc: "设备型号"},
                        {value: "cluster.name", desc: "集群"},
                        {value: "type", desc: "服务器分类"},
                        {value: "sn", desc: "设备序列号"},
                        {value: "manageIp", desc: "管理网"},
                        {value: "illoIp", desc: "ILLO地址"},
                        {value: "period", desc: "期数"},
                        {value: "position", desc: "机架位置"},
                        {value: "publicIp", desc: "公网"},
                        {value: "cn2Ip", desc: "CN2"},
                        {value: "outIp", desc: "存储外网"},
                        {value: "systemVersion", desc: "系统版本"},
                        {value: "osVersion", desc: "内核版本"},
                        {value: "use", desc: "用途"},
                        {value: "deliveryDate", desc: "交付日期"},
                        {value: "useUser", desc: "申请人"},
                        {value: "tag", desc: "项目名称"},
                        {value: "remarks", desc: "备注"},
                        {value: "computerPosition", desc: "机房位置"},
                    ],
                    multipleSelection: [],
                }
            },
            created() {
                this.getList()
                findAllDeviceType().then(response => {
                    this.deviceTypeList = response.data;
                })
                findAllCluster().then(response => {
                    this.clusterList = response.data;
                })
            },
            mounted() {
                this.columnDrop()
                this.col=this.getDropCol();
                this.dropCol=this.getDropCol();
            },
            methods: {
                getValue(row,type,prop){
                    switch (type) {
                        case 'cluster':
                            return row.cluster.name
                        case 'date':
                            return this.getDate(row[prop])
                    }
    
                },
                saveOrder(){
                    let result = JSON.stringify(this.dropCol);
                    let data = {
                        orders: result,
                        type: "device"
                    }
                    saveOrders(data).then(res => {
                        this.$message({
                            type: 'success',
                            message: '保存成功 '
                        });
                        this.$store.dispatch('SetOrders', result)
                    })
                },
                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;
                    }
    
                },
                addHs() {
                    this.$prompt('请输入变更记录', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                    }).then(({value}) => {
                        addHistories({
                            deviceId: this.multipleSelection,
                            message: value
                        }).then(response => {
                            this.$message({
                                type: 'success',
                                message: '添加变更成功 '
                            });
                            this.HistoryVisible = false;
                            this.getList();
    
                        })
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '取消添加'
                        });
                    });
    
                },
                handleSelectionChange(rows) {
                    let data = [];
                    rows.forEach(function (item) {
                        data.push(item.id)
                    })
                    this.multipleSelection = data
                },
                changeCols() {
                    if (this.cols && this.cols.hasOwnProperty('device')) {
                        if (this.cols['device'] === "") {
                            this.colsList = []
                            this.changeVisible = true;
                            return
                        }
                        let str = this.cols['device'];
                        let data = this.utils.str2Arr(str);
                        this.colsList = data;
                    } else {
                        this.colsList = [];
                    }
                    this.changeVisible = true;
                },
                saveCols() {
                    let result = this.utils.arr2Str(this.colsList);
                    let data = {
                        cols: result,
                        type: "device"
                    }
                    saveColsInfo(data).then(res => {
                        this.changeVisible = false;
                        this.$message({
                            type: 'success',
                            message: '变更成功 '
                        });
                        this.$store.dispatch('SetCols', result)
                        location.reload()
                    })
                },
                checkShow(name) {
                    if (this.cols && this.cols !== '' && this.cols.hasOwnProperty('device')) {
                        if (this.cols['device'] === "") {
                            return true;
                        }
                        let checkList = this.utils.str2Arr(this.cols['device'])
                        return checkList.indexOf(name) > -1;
                    }
                    return true;
                },
                getDate(time) {
                    return moment(time).format('YYYY-MM-DD')
                },
                getDateTime(time) {
                    return moment(time).format('YYYY-MM-DD HH:mm:ss')
                },
                addHistory() {
                    this.$prompt('请输入变更记录', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                    }).then(({value}) => {
                        addHistory({
                            deviceId: this.history_deviceId,
                            message: value
                        }).then(response => {
                            this.$message({
                                type: 'success',
                                message: '添加变更成功 '
                            });
                            this.HistoryVisible = false;
                            this.getList();
    
                        })
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '取消添加'
                        });
                    });
                },
                historyInfo(row) {
                    this.history = row.histories;
                    this.HistoryVisible = true;
                    this.history_deviceId = row.id
                },
                handleFilter() {
                    this.listQuery.page = 1
                    this.getList()
                },
                cpuInfo(row) {
                    this.deviceType = row.deviceType
                    this.CPUVisible = true;
                },
                memoryInfo(row) {
                    this.deviceType = row.deviceType
                    this.MemoryVisible = true;
                },
                nicInfo(row) {
                    this.deviceType = row.deviceType
                    this.NicVisible = true;
                },
                diskInfo(row) {
                    this.deviceType = row.deviceType
                    this.DiskVisible = true;
                },
                saveDevice(formName) {
                    this.$refs[formName].validate((valid) => {
                        if (valid) {
                            if (this.editFlag === 0) {
                                createDevice(
                                    this.temp
                                ).then(response => {
                                    this.$message({
                                        message: '保存成功',
                                        type: 'success'
                                    });
                                    this.getList();
                                    this.resetDeviceForm('ruleForm')
                                })
                            } else {
                                modifyDevice(
                                    this.temp
                                ).then(response => {
                                    this.$message({
                                        message: '保存成功',
                                        type: 'success'
                                    });
                                    this.getList();
                                    this.resetDeviceForm('ruleForm')
                                })
    
                            }
    
    
                        } else {
                            this.$message.error('保存失败,请重试');
                            return false;
                        }
                    });
                },
                handleAvatarSuccess(res, file) {
                    if (res.code != 200) {
                        this.$message({
                            message: res.msg,
                            type: 'error'
                        });
                        return
                    }
                    this.$message({
                        message: '上传成功',
                        type: 'success'
                    });
                    this.getList()
                },
                resetDeviceForm(formName) {
                    this.$refs[formName].resetFields();
                    this.dialogFormVisible = false;
                },
                getList() {
                    this.listLoading = true
                    fetchList(this.listQuery).then(response => {
                        this.list = response.data.content;
                        this.total = response.data.totalElements;
                        this.listLoading = false
                    })
                },
                createDevice() {
                    this.resetTemp()
                    this.dialogFormVisible = true;
                    this.editFlag = 0;
                },
                editDevice(item) {
                    this.resetTemp()
                    this.temp.id = item.id;
                    this.temp.clusterId = item.cluster.id;
                    this.temp.name = item.name;
                    this.temp.use = item.use;
                    this.temp.deliveryDate = item.deliveryDate;
                    this.temp.type = item.type;
                    this.temp.period = item.period;
                    this.temp.manageIp = item.manageIp;
                    this.temp.illoIp = item.illoIp;
                    this.temp.remarks = item.remarks;
                    this.temp.deviceType = item.deviceType;
                    this.temp.sn = item.sn;
                    this.temp.tag = item.tag;
                    this.temp.position = item.position;
                    this.temp.systemVersion = item.systemVersion;
                    this.temp.osVersion = item.osVersion;
                    this.temp.publicIp = item.publicIp;
                    this.temp.outIp = item.outIp;
                    this.temp.cn2Ip = item.cn2Ip;
                    this.temp.computerPosition = item.computerPosition
                    this.dialogFormVisible = true;
                    this.editFlag = 1;
                },
    
                resetTemp() {
                    this.temp = {
                        id: null,
                        name: null,
                        clusterId: null,
                        use: null,
                        deliveryDate: null,
                        type: null,
                        manageIp: null,
                        illoIp: null,
                        period: null,
                        remarks: null,
                        deviceType: null,
                        sn: null,
                        tag: null,
                        isDel: null,
                        position: null,
                        useUser: null,
                        startDate: null,
                        systemVersion: null,
                        osVersion: null,
                        outIp: null,
                        publicIp: null,
                        cn2Ip: null,
                    }
                },
                deleteDevice(row) {
                    this.$confirm('此操作将删除该资产, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        deleteDevice(row.id).then(response => {
                            this.getList();
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                        })
    
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消删除'
                        });
                    });
                },
                //列拖拽
                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)
                        }
                    })
                }
    
    
            }
        }
    </script>
    <style>
    
      .el-dropdown-link {
        cursor: pointer;
        color: #409EFF;
      }
    
      .demo-table-expand {
        font-size: 0;
      }
    
      .demo-table-expand label {
        width: 90px;
        color: #99a9bf;
      }
    
      .demo-table-expand .el-form-item {
        margin-right: 0;
        margin-bottom: 0;
        width: 50%;
      }
    
      .rowClass {
        height: 30px;
        padding: 0 !important;
    
      }
    
      .cellClass {
        padding: 2px !important;
      }
    </style>