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
    },

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM