2. 查找 el-table 中关于默认选中行的属性或方法 highlight-current:是否高亮当前行。 current-row-key:当前高亮行的 key,根据这个 key 会自动设置 highlight-current。 current-change:当前行变更时会触发该事件。3. 实现代码以设置 el-table 的默认选中行 你可以通过设置 current-row-key 属性来指定默认选中的...
//选中 之前记录的 选中行let NowIndex=0;for(let i=0;i<this.BaseInfoList.length;i++){//this.BaseInfoList 是EL-TABLE 绑定 的数据源if(this.BaseInfoList[i].SuppliesNum==this.NowSelectNum){//匹配选中行的唯一 键,以找到记录的行号NowIndex=i;this.SelectDataIndex=i;}}this.SetCreenRow(this....
/* 用来设置当前页面element全局table 选中某行时的背景色*/.el-table__body tr.current-row > td { background-color: #78f709 !important;/* color: #f19944; *//* 设置文字颜色,可以选择不设置 */}/* 用来设置当前页面element全局table 鼠标移入某行时的背景色*/.el-table--enable-row-hover .el...
所以指定到这个 class 上,然后加以隐藏不显示的 none 即可 除了针对多选的单元格的操作外,还可以针对某整行进行样式更改 给表加上属性 row-class-name(行的 className 的回调方法): <el-table :data="tableDataList" :row-class-name="tableRowClassName" ... > 方法: // 可以被选中的行加上背景色function...
之后每次触发select事件我就遍历selectedData,用indexOf判断select的这一行row是否在selectedData中,在则是取消选中,咱们从selectedData中删除该row;否则就是选中,push到selectedData中,在需要时再将selectedData传给后端 • handleSelect(rows, row) { if (this.selectedData.length !== 0) {...
背景部分提到，当在表格中选择一行后，通过 setCurrentRow 方法设置选中行，但在删除某些数据（但不包括被选中的行）后尝试重新选中时，实际选中的行并不是预期的行。控制台打印的行数据和实际选中的行数据不一致，这个问题让开发者感到困惑。在尝试解决这一问题时，开发者尝试使用 nextTick 和 setTime...
//this.curRow之前选中的行 let curIndex = val.findIndex(item => item.id=== this.curRow.id) //如果之前选中的行被删除,默认选中第一行 if (curIndex === -1) { this.$nextTick(() => { this.$refs.multipleTable.setCurrentRow(val[0]) ...
需求:进入页面时默认选中表格第一行 ref="singleTableRef" :data="tableData" highlight-current-row @row-click="handleCurrentChange" > 三个注意点: ref="singleTableRef" ——> 用于调用 table 组件的方法 setCurrentRow(setCurrentRow 用于单选表格,设定某一行为选中行)highlight-current-row ——> 用于...
简介:基于elementUI的el-table组件实现按住某一行数据上下滑动选中/选择或取消选中/选择鼠标经过的行 实现代码 <template><div :class="$options.name"><el-tablestyle="user-select: none"ref="table":data="tableData":row-class-name="row_class_name"@mousedown.native="mousedownTable"@row-click="row_cl...
el-table 选中行与复选框相互联动 需求:对el-table 选中行时复选框也被选中,选中复选框时触发行的相应变化 (拢共分两步)步骤:第一步:点击行时触发复选框的选择或取消; 第二步:点击复选框时触发相应行的变化(问题关键在怎么获取复选框选取的行) 1. 点击行时触发复选框的选择或取消...