element技巧：设置高亮切换、行点击、默认首行高亮、点击行时如何获取索引值、如何将两个属性合成一个显示

var xxTableCpn = {
    template:
    '<div class="timeout-in-stock-details-fixed-table">\n'+
    '<el-table class="table-content"   ref="singleTable" :data="toChildFixedTable" style="width: 100%" height="100%" size="mini" tooltip-effect="dark"   :row-class-name="tableRowClassName" @row-click ="tableRowClick" :highlight-current-row = "highlight">\n'+
    '<el-table-column class-name="table-col" prop="doid" label="单号" min-width="100" header-align="center" align="center" show-overflow-tooltip></el-table-column>\n'+
    '<el-table-column class-name="table-col" prop="route" label="线路" min-width="100" header-align="center" align="center" show-overflow-tooltip></el-table-column>\n'+
    '<el-table-column class-name="table-col" prop="deliverytime" label="发货时间" min-width="120" header-align="center" align="center" show-overflow-tooltip></el-table-column>\n'+
    '<el-table-column class-name="table-col" prop="signtime" label="签收时间" min-width="120" header-align="center" align="center" show-overflow-tooltip></el-table-column>\n'+
    '<el-table-column class-name="table-col" prop="actual,plan" label="实际/应有坐标(个)"  min-width="100" header-align="center" align="center" show-overflow-tooltip>' +
         '<template slot-scope="scope">{{scope.row.actual}}/{{scope.row.plan}}</template>\n'+
    '</el-table-column>\n'+
    '</el-table>\n'+
    '</div>'
    ,
    name: 'xxTableCpn',
    props: ['toChildFixedTable'],
    data: function data() {
        return {
            highlight: true,
        }
    },
    methods: {
        setCurrent(row) {
            this.$refs.singleTable.setCurrentRow(row);
        },
        tableRowClassName ({row, rowIndex}) {
            //把每一行的索引放进row
            row.index = rowIndex;
        },

        /**
         * 行点击事件触发函数
         * @param row所点击的行
         */
        tableRowClick(row) {
            this.$parent.updateMapRoute(row.index,row.route)
        },
    },
    updated(){
        var _this = this;
        _this.$nextTick(function () {
            _this.setCurrent(this.toChildFixedTable[0]);
        })

    }

};

分解讲解：

1、设置高亮切换

:highlight-current-row = "highlight"//在el-table里加

data: function data() {
    return {
       highlight: true,
    }
},

2、默认首行高亮

1、el-table标签里加入ref="singleTable"

2、方法里加入setCurrent方法
setCurrent(row) {
    this.$refs.singleTable.setCurrentRow(row);//调用element  table 的setCurrentRow方法
},

3、每次updated数据完调用setCurrent方法
   updated(){
        var _this = this;
        _this.$nextTick(function () {
            _this.setCurrent(this.toChildFixedTable[0]);//设置首行为默认选中
        })

    }

附上api：
setCurrentRow	用于单选表格，设定某一行为选中行，如果调用时不加参数，则会取消目前高亮行的选中状态

3、点击行时如何获取索引值

1、在el-table里加入:row-class-name="tableRowClassName"和 @row-click ="tableRowClick"

2、方法里加入
    tableRowClassName ({row, rowIndex}) {
      //把每一行的索引放进row
     row.index = rowIndex;
   },

    /**
     * 行点击事件触发函数
     * @param row所点击的行
    */
  tableRowClick(row) {
      this.$parent.updateMapRoute(row.index,row.route)
  },

这样点击的时候就可以获取改行的索引了

附上：
1、row-class-name	行的 className 的回调方法，也可以使用字符串为所有行设置一个固定的 className。	类型：Function({row, rowIndex})/String
2、row-click	当某一行被点击时会触发该事件  参数：row, column, event