element-ui 表格单选,高亮,页面跳转后保持高亮
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
·
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; },
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 年前
AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念,把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起,为开发者提供从开发、训练到部署的一站式体验。
更多推荐



所有评论(0)