vue first test

Recently internship, job is android Kong, according to the group needs a come, first learned vue, made a web page. Programming also found himself thinking a little too curing, good food. Little effort, but doing for a long time. Using a component element of the table (table), records about the problem, first write directory.

1, click on a row, get some information about the row in which information is passed through the background.

The problem here is that there is in fact a form of packaged predecessors. In use with a document element in the el-table @ current-change fields to define a handleCurrentItemChange method, but because the row that is obtained by the parameter passed to the function, and the function which is packaged in child control, the call not obtain parent control. At that time, still unfamiliar to vue, cards for a long time, finally completed by the colleagues pointing.
The definition of a child props in control,

getCurrChooseItem: {
      type: Function,
      default: null
    }

Then calling its methods handleCurrentItemChange method of child controls in

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

Then write in parent control :get-curr-choose-item="handleClick"
and finally handleClick(row) {}be able to call the information click on the row.
The main problem here is the idea of calling, I thought to have been thinking about how to preserve the acquired row and then spread to the parent control.

2, set up in front of the radio button issue

<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>

Well, here I am also reflects the rigid ideas.
My idea has always been to obtain row by clicking the first few in the table, to bind checked value of a few, beginning with that rowClassName({ row, rowIndex })to get the Number of index, then there is row.index, the sending by the above the child control, but later we found the problem calls that sent first, after obtaining the index, which would lead to undefined error, eventually to be reminded by row can be acquired only field transId as a parameter.

3, the props bind values, display processing and then
actually element has a corresponding attribute this mainly to spend time keyword search to retrieve the information wrong

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

Then define methods in

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