element-ui 表格单选,高亮,页面跳转后保持高亮

1:element-ui表格高亮默认颜色,在index.min.css中1855行,这里我改动了一下:

.el-table__body tr.current-row > td  {
  1. /* background#edf7ff; */
  2. background#20a0ff;
  3. color#ffffff;
2:表格

        v-if="supplierList.length>0"
        ref="supplierTable"
        :data="supplierList"
        highlight-current-row
        border
        @current-change="handleSupplierChange"
        style="width: 100%;border-left: 1px solid #eeeeee">
                align="center"
            label="选择">
        
    
                align="center"
            prop="supplierNo"
            label="供应商编号">
    
                align="center"
            prop="name"
            label="供应商名称"
    >
    
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;
},



你可能感兴趣的:(element-ui)