element UI中table组件实现单选操作

3,195 阅读1分钟

项目中使用element UI的table组件实现选择短信模板的功能,需要用到单选按钮,实现效果:

 <el-table v-loading="isLoading" :data="speechTableData" border style="width: 100%;" highlight-current-row>
        <el-table-column label="序号" min-width="30" align="center">
          <template slot-scope="scope">
          // 利用element中的单选按钮
            <el-radio v-model="radio" :label="scope.$index" @change.native="getCurrentRow(scope.$index,scope.row)"/>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="name" label="姓名" min-width="50px" />
        <el-table-column align="center" prop="cont" label="部门" min-width="50px" />
        <el-table-column align="center" prop="liont" label="职务" min-width="50px" />
</el-table>

js:

 getCurrentRow($index, row) { // 获取选中数据
 //选择单选按钮 赋值 id
      this.radios = row.id
      console.log(this.radios)
}

参考地址

!!!!!!!!!!!!!!!!!!! 没有答案的可以在这里看看!!!!!!!!!!!!!

直达