vue初试

最近刚刚开始实习，岗位是android岗，一进来根据组内需求，先学了vue，做了网页。也发现自己编程的思路有点过于固化，好菜。工作量不大，但是做了好久。用的是element的table组件（表格），记录一下问题，先写个目录。

1、点击某个row，获取该row的一些信息，其中的信息是通过后台传入的。

这里遇到的问题是，这里用的表格其实是由前辈们封装好的。在element文档中有利用在el-table中的@current-change字段来定义一个handleCurrentItemChange方法，但是因为那个获得的row是通过参数传入到函数中，而函数是封装在子控件里面，在调用的父控件中获取不到。由于当时对vue还不熟，卡了很久，最后由同事指点完成。
在子控件中定义一个props，

getCurrChooseItem: {
      type: Function,
      default: null
    }

然后在子控件中的handleCurrentItemChange方法中调用其方法

handleCurrentItemChange(row) {
      if (this.getCurrChooseItem) {
        this.getCurrChooseItem(row);
      }
    }

然后在父控件中写:get-curr-choose-item="handleClick"
最后再handleClick(row) {}就能调用到点击的row的信息。
这里主要是调用的思路的问题，我当时脑子一直在想如何将获取到的row保存下来再传到父控件。

2、设置前面那个单选框的问题

<el-table-column
          label="选择"
          min-width="120"
        >
          <template slot-scope="scope">
            <el-radio
              v-model="checked"
              :label="scope.row.transId"
            >&thinsp;
            </el-radio>
          </template>
        </el-table-column>

唉，这里也体现了我思路的呆板。
我的思路一直都是通过获取点击的row在表格中的第几条，来绑定checked的值为几，一开始用的是rowClassName({ row, rowIndex }) 来获取条数index，然后存在row.index中，通过上面那个发送到子控件，但是后面发现调用的问题，即先发送，后获取index，这样就会导致undefined报错，最后还是被提醒可以通过获取的row中唯一字段transId来作为参数。

3、将props绑定的值，处理后再显示
其实element有相应属性，这个花时间主要是检索资料的关键词查的不对

<el-table-column
          label="识别结果"
          prop="authStatus"
          show-overflow-tooltip
          :formatter="formatStatus"
          min-width="150"
        />

再在methods里定义

formatStatus(data) {
      let msg = this.$refs.grid.data.authStatus === 1 ? '通过' : '失败';
      return msg;
    }