vue 、 在element-ui的el-table组件中 使用 el-select绑定对象时value-key的注意事项

news/2024/7/10 1:31:26 标签: vue, js, html5
// 绑定对象时设置了value-key,再次点击时不会高亮,找了源码发现key需要一致;
// 相关源码
isEqual(a, b) {
 if (!this.isObject) {
    return a === b;
  } else {
    const valueKey = this.select.valueKey;
    return getValueByPath(a, valueKey) === getValueByPath(b, valueKey);
  }
}
// =============================
// 于是需要在list 或 row 统一一个key,把scope.row.des,改成scope.row即可
// 它会用scope.row.des 比较item.des,这时选中的就显示label
<el-select
  @change="handleChange(scope.row, $event)"
   value-key="des"
   :value="scope.row"
   placeholder="请选择"
   clearable
   size="small"
 >
   <el-option  v-for="item in list" :key="item.id" :label="item.name"
      :value="item" 
   />
</el-select>
// ==============================
handleChange(row,obj) {
	row.id = obj.id;
	row.des = obj.des
}

http://www.niftyadmin.cn/n/1367766.html

相关文章

如何将浏览器中的坐标转换为 canvas 中的坐标

function convertToCanvas(canvas, x, y} {const canvasElement canvas.getBoundingClientRect() ;return { x: (x- canvasElement.left)*(canvas.width / canvasElement.width),y: (y - canvasElement.top)*(canvas.height / canvasElement.height)} }转换的逻辑是先使用鼠…

js浏览器版本判断

// 判断是否为IE浏览器 function isIE () {const bw window.navigator.userAgent// ie版本 10 及以下const compare (s) > bw.indexOf(s) > 0// ie 11const ie11 (() > ActiveXObject in window)()return compare(MSIE) || ie11 } isChrome() {const e navigator.…

vue动态路由刷新后无限循环、页面空白

使用的是PanJiaChen大佬的vue-admin-template模板 下载大佬的权限管理模板运行正常&#xff0c;自己用来改造刷新就无限循环or页面空白&#xff0c;下面是改造成功的permission.js相关代码 // &#xff01;&#xff01;&#xff01;自己项目不需要token const hasGetUserInfo…

vue倒计时60秒

// _cutime 60resetTime(){let timerconst countDown ()>{this.time--;if(this.time < 0){clearInterval(timer);this.time _cutimethis.$forceUpdate()return}timersetTimeout(countDown,1000);}countDown()},

IE下载文件流,文件后缀名丢失

谷歌内核正常,IE下载无后缀名&#xff0c;打不开 本次项目需要下载的文件就两种格式xlsx和zip所以走ie时手动添加后缀名就可以搞定了 export const download async({ url, params, method post, type xlsx }) > {const isget method.toLowerCase() get;const obj is…

vue Element-ui el-table合计行样式自定义、不换行显示

本项目由于合计汇总数字太多太长&#xff0c;又不能改变原width的情况下&#xff0c;就自定义样式超出点点点了&#xff0c;又要鼠标悬浮看全。js&#xff08;设置‘title’&#xff09; 配合 css&#xff08;不换行&#xff09; watch: {//loading 为v-loadingloading(bool) {…

vue Element-ui el-table刷新列表后自动滚动到高亮行

const Tbody this.$refs.multipleTable.$el.querySelector(.el-table__body-wrapper> table > tbody) setTimeout(() > {Tbody.querySelector(.el-table__row.current-row)?.scrollIntoView({ behavior: instant, block: center, inline: nearest }) }, 300)

前端自定义导出Excel

import FileSaver from file-saver; import XLSX from xlsx;function exportExcel(_dataSource) {var wopts {bookType: xlsx,bookSST: true,type: binary};var workBook {SheetNames: [Sheet1],Sheets: {},Props: {}};let dataSource [{ 暂无数据: 暂无数据 }];const tabel…