zoukankan      html  css  js  c++  java
  • elementUI表格单击行时选中该行checkbox

    1.table上加上  @row-click="handleClickTableRow"

    2.单选框的checkbox那列加上  @selection-change="handleSelectionChange"

    3.table加上ref

    4.实现1,2的方法

     methods: {
        handleClickTableRow(row, event, column) {
          console.log(row);
          console.log(column);
          this.$refs.fileTable.toggleRowSelection(row);
        },
           handleSelectionChange(rows) {
          console.log(rows);
          this.multipleSelection = rows;
        },
        
      },

    结果:

    完整代码:

    <template>
    <div>
      <el-table
      ref="fileTable"
       @row-click="handleClickTableRow"
         :data="tableData"
        style=" 100%">
        <el-table-column  @selection-change="handleSelectionChange" type="selection" width="55"></el-table-column>
        <el-table-column
          label="日期"
          width="180">
          <template slot-scope="scope">
            <i class="el-icon-time"></i>
            <span style="margin-left: 10px">{{ scope.row.date }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="姓名"
          width="180">
          <template slot-scope="scope">
            <el-popover trigger="hover" placement="top">
              <p>姓名: {{ scope.row.name }}</p>
              <p>住址: {{ scope.row.address }}</p>
              <div slot="reference" class="name-wrapper">
                <el-tag size="medium">{{ scope.row.name }}</el-tag>
              </div>
            </el-popover>
          </template>
        </el-table-column>
        
      </el-table>
    </div>
    </template>
    <script>
    export default {
      name: "HelloWorld",
      data () {
        return {
           multipleSelection: [], // 表格被选中的内容
           tableData: [{
              date: '2016-05-02',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1518 弄'
            }, {
              date: '2016-05-04',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1517 弄'
            }, {
              date: '2016-05-01',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1519 弄'
            }, {
              date: '2016-05-03',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1516 弄'
            }]
        };
      },
      methods: {
        handleClickTableRow(row, event, column) {
          console.log(row);
          console.log(column);
          this.$refs.fileTable.toggleRowSelection(row);
        },
           handleSelectionChange(rows) {
          console.log(rows);
          this.multipleSelection = rows;
        },
        
      },
    }
    </script>
    <style lang="css" scoped>
    </style>
  • 相关阅读:
    httprunner-2-linux下搭建hrun(下)
    Docker学习3-简单shell脚本安装mysql5.7与docker小技巧
    功能测试--聊天功能测试&微信聊天
    Fiddler抓包3-查看get与post请求
    面向对象--继承
    Mybatis入门
    Maven基础
    Cookie&Session
    Redis应用
    Redis概念和安装
  • 原文地址:https://www.cnblogs.com/luguankun/p/12616005.html
Copyright © 2011-2022 走看看