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; },
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 个月前
更多推荐
已为社区贡献6条内容
所有评论(0)