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