element-ui表格多选,每次只能选中一个并获取数据

最新推荐文章于 2024-03-02 12:11:29 发布

雨雨＃#雨雨

最新推荐文章于 2024-03-02 12:11:29 发布

阅读量1k

点赞数 1

分类专栏：笔记文章标签： elementui vue.js javascript

本文链接：https://blog.csdn.net/weixin_60508127/article/details/125312359

版权

笔记专栏收录该内容

48 篇文章 0 订阅

订阅专栏

::v-deep .el-table__header-wrapper .el-checkbox {//禁掉上面的全选

  display: none;

}


<el-table :data="tableData" @select="handleSelectionChange" border ref="tableDataRefs" style="width: 100%">
      <el-table-column type="selection" width="55"/>
      <el-table-column prop="date" label="日期" width="180"/>
      <el-table-column prop="name" label="姓名" width="180"/>
      <el-table-column prop="address" label="地址"/>
    </el-table>


methods: {
	    handleSelectionChange(selection, row) {
      // 判断长度等于1 获取
      if (selection.length === 1) {
        this.obtainData = selection[0]
      }
      if (selection.length > 1) {
        this.obtainData = selection[1]
        // shift() 方法用于把数组的第一个元素从其中删除，并返回第一个元素的值。
        // 该方法不创建新数组，而是直接修改原有的 arrayObject。
        let del_row = selection.shift()
        // 其余的都不选中
        this.$refs.tableDataRefs.toggleRowSelection(del_row, false)
      }
      console.log(this.obtainData);
    },
}