一.单选框表格默认选中某一行高亮状态

1.首先，element ui-----table添加表格属性highlight-current-row，官方解释为是否要高亮当前行，其次添加 ref=“multipleTable”，

  <el-table
          :data="tableData3"
          @row-click="handle"
          ref="multipleTable"
          :header-cell-style="{background:'#DAEDFF'}"
          :row-class-name="tableRowClassName"
          highlight-current-row
        >
          <!-- <el-table-column type="selection" :selectable="selectEnable" width="95" ></el-table-column> -->
          <el-table-column
            fixed
            :prop="item.prop"
            :label="item.name"
            width="247"
            v-for="item in column"
            :key="item.id"
          ></el-table-column>
        </el-table>

2.其次element ui-----table默认选中一行用setCurrentRow(row)方法，官方解释为用于单选表格，设定某一行为选中行，如果调用时不加参数，则会取消目前高亮行的选中状态。然后我们来看一下setCurrentRow(row)==>参数row是当前选中的数据，我们在vue的生命周期函数mounted加载后，来选中table的第一条数据，借用ref绑定找到table的数据源。第一个参数为表格数据的某一项，不可以把整个数组放进去。这里重中之重来了，这样写大家通常都会出问题，BUG就是样式并没有修改没有高亮，而且我点击第一行的时候也没有显示高亮，只能我点击了另外的一行再点击第一行的时候才会显示高亮，表示选中的状态。或者各种各样的问题。

原因就是可能这个element-UI中的table还没有加载渲染完毕 ，此时我们只需要加一个延时方法定时器等等都可以。

 mounted() {
      this.$nextTick(()=>{
            this.$refs.multipleTable.setCurrentRow(
            this.tableData3[this.rowIndex],
            true
          );
})   
  },

二.单选框表格点击某一行获取表格行数(表格数据下标)

1.首先可以通过指定 Table 组件的 row-class-name 属性来为 Table 中的某一行添加 class，表明该行处于某种状态。这个属性会自动执行。

<template>
  <el-table
    :data="tableData2"
    style="width: 100%"
    :row-class-name="tableRowClassName">
    <el-table-column
      prop="date"
      label="日期"
      width="180">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="180">
    </el-table-column>
    <el-table-column
      prop="address"
      label="地址">
    </el-table-column>
  </el-table>
</template>

<style>
  .el-table .warning-row {
    background: oldlace;
  }

  .el-table .success-row {
    background: #f0f9eb;
  }
</style>

<script>
  export default {
    methods: {
      tableRowClassName({row, rowIndex}) {
        if (rowIndex === 1) {
          return 'warning-row';
        } else if (rowIndex === 3) {
          return 'success-row';
        }
        return '';
      }
    },
    data() {
      return {
        tableData2: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }]
      }
    }
  }
</script>

2.我们这时的第二个参数rowIndex就是对应的行数下标，第一个参数为数据对应的数据对象，此时我们可以每一项中添加下标。

 tableRowClassName({ row, rowIndex }) {
      //把每一行的索引放进row
      row.rowIndex = rowIndex;
    },