• 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>
  • 相关阅读:
    cookie和session
    memcached安全性 django使用memcached
    spring boot jar包做成linux服务,windows服务开机启动
    sqlserver暂时停用全部外键
    jsonobject 转对象失败。
    spring bean 通过 applicationcontext 获取不到
    java spring 线程中注入bean会失败。
    浏览器预检,后台响应(转载)
    amazon redshift sql 语法 和my sql的区别
    返回视图,页面不跳转,return ModelandView 页面不能正确跳转问题
  • 原文地址:https://www.cnblogs.com/luguankun/p/12616005.html
Copyright © 2020-2023  润新知