Vue Element-UI 中列表单选的实现

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

el-table中单选的实现

引用场景: 选择单条数据进行业务操作
实现方式: 给 el-table-column 设置 el-radio

Template 代码

<div class="result-container">

  <el-table :data="producList" border>

    <el-table-column width="60px" align="center">

      <!-- label非常重要 -->

      <template v-slot="props">

        <el-radio

          v-model="selectId"

          :label="props.row.id"

          @change="handleRowChange(props.row)"

        >{{""}}</el-radio>

      </template>

    </el-table-column>

    <el-table-column label="产品名称" prop="name"></el-table-column>

    <el-table-column label="品牌" prop="branch"></el-table-column>

  </el-table>

</div>

JS 代码

export default {

  data() {

    return {

      producList: [],

      selectId: ''

    }

  },

  methods: {

    handleRowChange(data) {

      this.selectId = data.id

    },

  },

}