Vue Element-UI 中列表單選的實現
阿新 • • 發佈:2020-07-28
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
},
},
}