elementui表格中添加Radio 单选框,并在数据加载完成时,回显状态为选中的数据。

53 阅读1分钟

效果如下:

代码:

html:

<el-table v-loading="loading" ref="singleTable" :data="userList" highlight-current-row
          @current-change="handleCurrentChange">
  <el-table-column label="选择" width="55" align="center">
    <template scope="scope">
      <el-radio :label="scope.row.userId" v-model="radioId">
        <span></span>
      </el-radio>
    </template>
  </el-table-column>
  <el-table-column label="用户名称" align="center" key="userName" prop="userName" v-if="columns[1].visible"
                   :show-overflow-tooltip="true"/>
  <el-table-column label="用户昵称" align="center" key="nickName" prop="nickName" v-if="columns[2].visible"
                   :show-overflow-tooltip="true"/>
</el-table>

JS:

<script>
  export default {
    props: {
      // 用户Id
      userId: {
        type: [Number, String]
      }
    },
    data() {
      return {
        // 遮罩层
        loading: true,
        // 遮罩层
        visible: false,
        // 用户数据
        userList: [],
        // 选中数据
        currentRow: null,
        radioId: null,
        // 列信息
        columns: [
          {key: 0, label: `用户编号`, visible: true},
          {key: 1, label: `用户名称`, visible: true},
          {key: 2, label: `用户昵称`, visible: true}
        ],
      };
    },
    created(e) {
      //回显
      this.radioId = this.userId;
    },
    methods: {
      //选中数据
      handleCurrentChange(row) {
        this.radioId = row.userId;
        this.currentRow = row;
      },
    }
  };
</script>