1:element-ui表格高亮默认颜色,在index.min.css中1855行,这里我改动了一下:
.el-table__body tr.current-row > td
{
- /* background: #edf7ff; */
- background: #20a0ff;
- color: #ffffff;
<el-table v-if="supplierList.length>0" ref="supplierTable" :data="supplierList" highlight-current-row border @current-change="handleSupplierChange" style="width: 100%;border-left: 1px solid #eeeeee"> <el-table-column align="center" label="选择"> <template scope="scope"> <el-radio v-model="supplierRadio" :label="scope.row.supplierNo">{{null}}</el-radio> </template> </el-table-column> <el-table-column align="center" prop="supplierNo" label="供应商编号"> </el-table-column> <el-table-column align="center" prop="name" label="供应商名称" > </el-table-column> </el-table>3:业务
supplierModal: function () {//这里是获取数据,然后调用回显高亮的方法 this.selectedSupplier = null; this.supplierPageCur = 1; var res = useAjax($url.findSupplierList, { token: getToken(), pageNum: 1, pageSize: 15, supplierNo: "", name: "" }); if (res.data.content) { this.supplierList = res.data.content; this.supplierTotalPages = res.data.totalPages; this.supplierTotalElements = res.data.totalElements; this.highlight();//获取到数据,调用回显高亮方法 } else { this.supplierList = []; } }, supplierPaging: function (pageCur) {//此处为分页方法,分页成功,调用回显高亮方法 if (pageCur > this.supplierTotalPages || pageCur < 1) return; this.supplierPageCur = pageCur; var res = useAjax($url.findSupplierList, { token: getToken(), pageNum: pageCur, pageSize: 15, supplierNo: this.selectSupplierType === 0 ? this.searchSupplierVal : "", name: this.selectSupplierType === 1 ? this.searchSupplierVal : "" }); if (res.data.content) { this.supplierList = res.data.content; this.supplierTotalPages = res.data.totalPages; this.supplierTotalElements = res.data.totalElements; this.highlight(); } }, highlight: function () {//回显高亮方法,根据已经选择的id,调用 element-ui table的设置高亮方法 if (this.supplierRadio === "") return; for (var a = 0; a < this.supplierList.length; a++) { if (this.supplierList[a].supplierNo === this.supplierRadio) { this.$refs.supplierTable.setCurrentRow(this.supplierList[a]); } } }, handleSupplierChange: function (supplier) {//点击表格行方法,主要获取当前选择的id if (!supplier) return; this.supplierRadio = supplier.supplierNo; this.selectedSupplier = supplier; },