zoukankan      html  css  js  c++  java
  • Ant Design of Vue table表格 点击一行选中效果

    点击一行并选中(可获取该行数据),改变颜色 

        <s-table
            ref="table"
            rowKey="key"
            bordered
            :columns="columns"
            :data="loadData"
            showPagination="auto"
            :customRow="customRow"
            :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange, type: 'radio' }"
          >
            <span slot="serial" slot-scope="text, record, index">
              {{ index + 1 }}
            </span>
          </s-table>
      computed: {
        rowSelection () {
          return {
            selectedRowKeys: this.selectedRowKeys,
            onChange: this.onSelectChange
          }
        }
      }
        customRow (record, index) {
          return {
            on: {
              click: (e) => {
                console.log(record, index)
                this.selectedRowKeys = [index]
                this.selectedRows = [record]
              }
            }
          }
        },
        onSelectChange (selectedRowKeys, selectedRows) {
          this.selectedRowKeys = selectedRowKeys
          this.selectedRows = selectedRows
        },
  • 相关阅读:
    自动化运维-ansible
    Linux中安装wget命令
    Celery
    SQLAlchemy
    非关系型数据库--MongoDB
    Flask框架
    Redis
    公钥与私钥
    win10 文件扩展名的更改
    if 和 elif 的区别
  • 原文地址:https://www.cnblogs.com/caoxen/p/13936908.html
Copyright © 2011-2022 走看看