element表格单选多选

44 篇文章 0 订阅
.current table thead{
  .el-table__cell:first-child .cell{
    .el-checkbox{
      display: none;
    }
  }
}
.gy-table-sort{
  .el-table--border .el-table__cell:first-child .cell{
    text-align: center;
    display: block;
    margin: 0 auto;
    padding: 0;
  }

  .el-table th:first-child:not(.el-table-column--selection),
  .el-table td:first-child:not(.el-table-column--selection),{
    padding-left: 0!important;
  }
}
<el-table
    ref="multipleTable"
    v-loading="loading"
    border
    :data="tableData"
    :row-style="rowClass"
    tooltip-effect="dark"
    :row-key="getRowKeys"
    highlight-currrent-row
    @selection-change="handleSelectionChange"
    @current-change="rowChange"
    :class="{'current': !tabIndex}"
  >
    <el-table-column v-if="tabIndex" align="center" width="55" label="单选">
      <template slot-scope="scope">
        <el-radio class="radio" @change="rowChange(scope.row)" v-model="currentRow" :label="scope.row.id">&nbsp;</el-radio>
      </template>
    </el-table-column>
    <el-table-column v-if="!tabIndex" type="selection" width="55" :reserve-selection="true"/>
    <el-table-column prop="id" label="房屋编号"/>
    <el-table-column prop="name" label="客户名称"/>
    <el-table-column prop="floorArea" label="建筑面积(M2)" width="110" align="center"/>
    <el-table-column prop="costArea" label="计费面积(M2)" width="110" align="center"/>
    <el-table-column prop="insideArea" label="套内面积(M2)" width="110" align="center"/>
    <el-table-column prop="sharedArea" label="公摊面积(M2)" width="110" align="center"/>
  </el-table>
  <el-pagination
    v-if="total > 0"
    background
    layout="prev, pager, next, sizes"
    :page-sizes="pageSizes"
    :page-size.sync="pageSize"
    :current-page.sync="pageIndex"
    :total="total"
    class="pagination"
    @size-change="loadData"
    @current-change="loadData"
  />
</div>

tabIndex: 0,
schData: {},
total: 0,
pageIndex: 1,
pageSize: 5,
pageSizes: [5, 10, 15],
tableData: [],
loading: true,
currentRow: null,
selectRow: [], // 选中行
selectData: [] // 选中数据


watch: {
  selectData(data) {
    this.selectRow = []
    if (data.length > 0) {
      data.forEach((item) => {
        this.selectRow.push(this.tableData.indexOf(item))
      })
    }
  }
},

methods: {
  rowClass({ rowIndex }) {
    if (this.selectRow.includes(rowIndex)) {
      return { background: '#ecf5ff' }
    }
  },
  getRowKeys(row) {
    return row.id
  },
  rowChange(row) {
    this.currentRow = row.id
    this.selectData = this.tableData.filter((item) => item.id === row.id)
    console.log(this.currentRow, this.selectData)
  },
  searchTab() {
    this.pageIndex = 1
    this.loadData()
  },
  // 列表
  loadData() {
    this.loading = true
    const { pageIndex, pageSize, proNodeId, userId } = this
    //接口方法里判断
    this.loading = false
    if (res.success) {
     this.total = res.response.dataCount
     // this.tableData = res.response.data
     this.tableData = [
       {
         id: '01-0102(101)',
         name: '张皓',
         floorArea: 100.1,
         costArea: 100,
         insideArea: 89.1,
         sharedArea: 30,
         state: 1
       },
       {
         id: '01-0102(102)',
         name: '马天龙',
         floorArea: 100.1,
         costArea: 100,
         insideArea: 89.1,
         sharedArea: 30,
         state: 1
       }
     ]  
   }
  },
  // 单选
  handleCurrentChange(val) {
    console.log('单选', val)
    this.currentRow = val
  },
  handleSelectionChange(data) {
    console.log('多选', data)
    this.selectData = data
  },

或者多选改单选

<el-table-column type="selection" width="55" :reserve-selection="true"/>


handleSelectionChange(data) {
  if (!this.tabIndex) { // 单选
    if (data.length > 1) {
      this.$refs.multipleTable.clearSelection()
      this.$refs.multipleTable.toggleRowSelection(data.pop())
    } else {
      this.selectData = data
    }
  } else { // 多选
    this.selectData = data
  }
},

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值