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:表格

<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;
},



  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值