<template> <div> <el-table id="table" :data="tableData" style="width: 100%" :row-class-name="tableRowClassName" :default-sort ="{prop:'index',order:'descending'}" > <el-table-column type="index" prop="index" label="index" width="180" v-model=tableData.index> </el-table-column> <el-table-column prop="date" label="Date" width="180" /> <el-table-column prop="name" label="Name" width="180" /> <el-table-column prop="address" label="Address" /> <el-table-column label="操作"> <template #default="scope"> <el-button size="mini" type="danger" @click.native.prevent="deleteRow(scope.$index, tableData)">删除</el-button> </template> </el-table-column> </el-table> </div> </template> <style type="scss" scoped> /deep/ .el-table .warning-row { background: oldlace; } /deep/ .el-table .success-row { background: #f0f9eb; } </style> <script> export default { data() { return { tableData: [{ index:'', date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄', }, { index:'', date: '2016-05-04', name: '王小2', address: '上海市普陀区金沙江路 1518 弄' }, { index:'', date: '2016-05-01', name: '王小3', address: '上海市普陀区金沙江路 1518 弄', }, { index:'', date: '2016-05-03', name: '王小4', address: '上海市普陀区金沙江路 1518 弄' }], // loading: true, } }, created(){ }, mounted(){ this.getData(); }, methods: { tableRowClassName({row, rowIndex}) { if (rowIndex == '1') { return 'warning-row'; } else if (rowIndex == '3') { return 'success-row'; } return ''; }, deleteRow(index, rows) { rows.splice(index, 1); }, getLoding(parameter){ const loading = this.$loading({ lock: true,//lock的修改符--默认是false text: 'Loading',//显示在加载图标下方的加载文案 spinner: 'el-icon-loading',//自定义加载图标类名 background: 'rgba(0, 0, 0, 0.7)',//遮罩层颜色 target: parameter//loadin覆盖的dom元素节点 }); //成功回调函数停止加载 // loading.close() }, getData(){ let dom = document.getElementsByTagName('tbody')[0].childNodes; let arr = []; let length = dom.length; for(var i = 0;i<length;i++){ arr.push(dom[i]) } for(var i=0;i<arr.length;i++){ if(arr[i].nodeName == '#text'){ arr.splice(i,1); } } for(var i=0;i<arr.length;i++){ this.getLoding(arr[i]) } }, }, } </script>
workTest
于 2022-04-14 23:59:25 首次发布