- 安裝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="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="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>
<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="MemoryVisible" width="80%">-->
<!-- <memory :device_type.sync="deviceType"></memory>-->
<!-- </el-dialog>-->
<!-- <el-dialog title="硬盤信息" :visible.sync="DiskVisible" width="80%">-->
<!-- <disk :device_type.sync="deviceType"></disk>-->
<!-- </el-dialog>-->
<!-- <el-dialog title="網卡信息" :visible.sync="NicVisible" width="80%">-->
<!-- <nic :device_type.sync="deviceType"></nic>-->
<!-- </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>