vue antd table行选中

a-table组件中加入以下两个属性 

:customRow="rowClick"
 :rowClassName="rowClassName" 

/**
* @Author: 路博欢
* @Date: 2019/8/22
* @Version: 1.0
* @Last Modified by: 路博欢
* @Last Modified time: 2019/8/22
**/
<comment>
  # 组件注释
  租户应用授权
</comment>
<template>
  <div class="pannel">
    <div class="pannel-title">
      <a-input-search placeholder="请输入租户名称/租户编码" v-model="params.other" @change="deb" >
        <a-button slot="enterButton" type="primary" v-waves>搜索</a-button>
      </a-input-search>
    </div>
    <div class="pannel-content">
      <div class="table-box">
        <div class="table-table">
          <a-table
            :columns="table.columns"
            :pagination="false"
            :dataSource="table.data"
            size="middle"
            :scroll="{x:300, y: table.height }"
            :loading="table.loading"
            :customRow="rowClick"
            :rowClassName="rowClassName"
            rowKey="id"
          >
            <template slot="name" slot-scope="text">
              <a href="javascript:;">{{text}}</a>
            </template>
          </a-table>
        </div>
        <div class="table-pagination">
          <Pagination
            :total="pagination.totalCount"
            :pageSize="pagination.pageSize"
            :current="pagination.pageNo"
            @onChange="onChangePage"
            @onShowSizeChange="onShowSizeChangePage"
          ></Pagination>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Pagination from "@/Pagination"; //分页组件
import debounce from 'lodash.debounce'
export default {
  name: "TenantAppLicense",
  components: {
    Pagination
  },
  props: {
    selected: {
      type: String,
      default: ''
    }
  },
  model: {
    // v-model
    prop: "selected",
    event: "change"
  },
  data() {
    return {
      Util,
      api: {
        getTenantApi: Util.domainTenant + Util.portTenant + '/web/tenant-info/tenant-list'  // 获取租住列表
      },
      table: { // table 参数
        loading: false,
        height: null,
        id: null,
        columns: [ // 配置表头
          {
            title: "租户编码",
            dataIndex: "tenantCode",
            width: 150,
          },
          {
            title: "租户名称",
            width: 150,
            dataIndex: "name"
          }
        ],
        data: []  // table 数据
      },
      pagination: { //分页参数
        pageNo: 1,
        pageSize: 10,
        totalCount: 0
      },
      params: {  // 请求参数
        current: 1,
        size: 10,
        other: undefined
      }
    };
  },
  computed: {},
  created() {
   
  },
  mounted() {
    

    //默认选中第一行
    // this.table.id = this.table.data[0]["id"];
    // this.rowClick(this.table.data[0]);
    // this.rowClassName(this.table.data[0]);
  },
  watch: {},
  methods: {
    /**
     * 监听input 执行debounce 延时1S后执行搜索方法
     */
    deb: debounce(function () {
        // 搜索方法
        this.search()
      }, 1000  // 延迟时间
    ),
    /**
     * 搜索
     */
    search() {
      this.getDataAction()
    },
    

    //table行点击
    rowClick(record, index) {
      return {
        on: {
          click: () => {
            this.table.id = record.id;
          }
        }
      };
    },
    //table行class
    rowClassName(record, index) {
      let className = "";
      if (record.id == this.table.id) {
        className = "rowActive";
        this.is_check = true;
        this.$emit('change', this.table.id)
      }
      return className;
    },
    //加载右边的表格
    updateRightTable(id) {},
    /**
     * 删除权限
     * @param id
     */

  },
  destroyed() {}
};
</script>

<style lang="scss">

.rowActive{
    background:#ddd
}
</style>