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

Posted 2020-12-18 leslie1943

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