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



GitHub 加速计划 / eleme / element
15
3
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:3 个月前 )
c345bb45 1 年前
a07f3a59 * Update transition.md * Update table.md * Update transition.md * Update table.md * Update transition.md * Update table.md * Update table.md * Update transition.md * Update popover.md 1 年前
Logo

AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念,把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起,为开发者提供从开发、训练到部署的一站式体验。

更多推荐