vue element-ui table单选

最新推荐文章于 2025-03-21 17:13:40 发布

l_XIANA

最新推荐文章于 2025-03-21 17:13:40 发布

阅读量177

点赞数

文章标签： javascript vue.js es6 elementui html

本文链接：https://blog.youkuaiyun.com/l_XIANA/article/details/114901402

版权

element-ui中只给了多选行，没有单选，自行实现效果==> 在这里插入图片描述

  <el-table
            ref="multipleTable"
            :header-cell-style="{
              background: '#F4F5F9',
              color: '#282D3B',
              borderRadius: '2px'
            }"
            :data="tableData"
            tooltip-effect="dark"
            size="mini"
            @current-change="clickChange"
          >
            <!-- <el-table-column type="selection" width="50" /> -->
            <el-table-column label="选择" width="55">
              <template slot-scope="scope">
                <el-radio v-model="tableRadio" :label="scope.row"><i /></el-radio>
              </template>
            </el-table-column>
            <el-table-column label="头像">
              <template slot-scope="scope">
                <div class="block">
                  <el-avatar
                    shape="square"
                    size="small"
                    :src="scope.row.avatar"
                  />
                </div>
              </template>
            </el-table-column>
            <el-table-column label="姓名">
              <template slot-scope="scope">{{ scope.row.name }}</template>
            </el-table-column>
            <el-table-column label="手机号码">
              <template slot-scope="scope">{{ scope.row.mobile }}</template>
            </el-table-column>
            <el-table-column label="所属部门">
              <template slot-scope="scope">{{ scope.row.mainDepartment }}</template>
            </el-table-column>
            <el-table-column label="上级部门">
              <template slot-scope="scope">{{ scope.row.parentDept }}</template>
            </el-table-column>
            <el-table-column label="职务">
              <template slot-scope="scope">{{ scope.row.position }}</template>
            </el-table-column>
            <el-table-column label="激活状态">
              <template slot-scope="scope">{{ handleGetUseSource(scope.row.status) }}</template>
            </el-table-column>
            <el-table-column label="角色">
              <template slot-scope="scope">{{ scope.row.roleName }}</template>
            </el-table-column>
          </el-table>

 clickChange(item) {
      console.log('item======>', item)
      this.tableRadio = item
    },