el-table 添加单选

最新推荐文章于 2024-08-27 16:59:43 发布

今晚来我家吗

最新推荐文章于 2024-08-27 16:59:43 发布

阅读量224

点赞数

文章标签： javascript html vue.js

本文链接：https://blog.csdn.net/qq_43059898/article/details/117336788

版权

这篇博客详细介绍了如何在Vue项目中利用Element UI的el-table组件实现表格选择功能。通过监听current-change事件和使用el-radio进行单选操作，同时展示了数据绑定和方法调用以获取选中行的数据。

摘要由CSDN通过智能技术生成

        <el-table
          ref="multipleTable"
          :data="productlist"
          :header-cell-style="{ background: '#F4F4F4' }"
          border
          @current-change="handleRowChange"
        >
          <el-table-column label="选择" width="80">
               <template slot-scope="scope">
                <el-radio v-model="selectId" :label="scope.row.name"
                  ><i></i
                ></el-radio>
              </template>
          </el-table-column>
          <el-table-column label="名称" prop="name">
            <template slot-scope="scope">
              {{ scope.row.name }}
            </template>
          </el-table-column>
          <el-table-column label="学工号" prop="productName" />
        </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button
          type="primary"
          :loading="btnLoading"
          size="mini"
          @click="ConfirmSelect"
        >确 定</el-button>
      </span>
data(){

      // 表格人员数组
      productlist: [
        {
          productName: '10010',
          name: '张三',
          checked: false
        },
        {
          productName: '10010',
          name: '李四',
          checked: false
        }
      ],
      // 选中name
    selectId: null,
     // 选中数据
      selectData: {},
}


  methods: {
	handleRowChange(value) {
		this.selectData = value
	}
     /**
     * 确认
     */
    ConfirmSelect(form, electType) {
        if (this.selectData !== null) {
          this.selectId = this.selectData.name;
        }
        console.log(this.selectId,this.selectData)
    },
 
}