请添加图片描述
在饿了么table组件中 有个toggleRowSelection方法,用于多选表格,切换某一行的选中状态,如果使用了第二个参数,则是设置这一行选中与否(selected 为 true 则选中)
在这里插入图片描述
结合@row-click事件即可完成,单击表格某一行完成多选框的选中以及取消选中。

主要代码

<el-table ref="multipleTable" @row-click="handleRowClick" :data="saleMaterialList" :row-key="getRowKeys" border
  @selection-change="selectionChange">
  <el-table-column type="selection" reserve-selection width="55"></el-table-column>
  <el-table-column prop="materialName" label="物料名称"> </el-table-column>
  <el-table-column prop="materialModel" label="规格型号"> </el-table-column>
  <el-table-column prop="materialRate" label="系数比重"> </el-table-column>
  <el-table-column prop="materialUnit" label="单位"> </el-table-column>
</el-table>
    //点击行触发,选中或不选中复选框
handleRowClick (row, column, event) {
   this.$refs.multipleTable.toggleRowSelection(row);
},

主要是 ref="multipleTable"@row-click="handleRowClick"

ref、refs介绍

一般在可以用来调用子组件中的方法,比如这里我给upload组件添加了一个ref="uploadC"

<Upload ref="uploadC" :multiple="true" operation-code="contract_sale" @getfjlist="getfjlist"    tip="修改操作以新上传文件为准" />

子组件upload中存在

clearFile(){
      this.fileList = []
    },

调用只需要在父组件中使用refs 就可以调用子组件中的clearFile方法

this.$refs.uploadC.clearFile()//清除附件列表

官网给出的解释:被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。如果在普通的 DOM 元素上使用,引用指向的就是 DOM 元素;如果用在子组件上,引用就指向组件实例
在这里插入图片描述
打印一下这玩意,可以看到官网给出的这些玩意都存在的,其他方法的使用也是一样。
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐