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
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:3 个月前 )
c345bb45 7 个月前
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 7 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐