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