创建具有单选框的el-table列表

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

笨拙前行

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

阅读量1.2k

点赞数 1

分类专栏： Vue JavaScript

本文链接：https://blog.youkuaiyun.com/qq_43042445/article/details/119491375

版权

本文介绍了如何使用ElementUI创建带有复选框和单选框的列表。在实现多选列表时，只需添加一个el-table-column并设置type为'selection'。为解决复选框内容过多折行的问题，可以使用'show-overflow-tooltip'属性。而对于单选框列表，初始样式可能不理想，解决方案是通过空div调整单选框的位置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1 创建具有复选框的列表行

在elementUI官网中，对于创建具有复选框的列表的方式进行了比较详细的阐述：
实现多选非常简单: 手动添加一个el-table-column，设type属性为selection即可；默认情况下若内容过多会折行显示，若需要单行显示可以使用show-overflow-tooltip属性，它接受一个Boolean，为true时多余的内容会在 hover 时以 tooltip 的形式显示出来。（摘自elementUI官网）

<template>
  <el-table
    ref="multipleTable"
    :data="tableData"
    tooltip-effect="dark"
    style="width: 100%"
    @selection-change="handleSelectionChange">
    <el-table-column
      type="selection"
      width="55">
    </el-table-column>
    <el-table-column
      label="日期"
      width="120">
      <template slot-scope="scope">{
  { scope.row.date }}</template>
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="120">
    </el-table-column>
    <el-table-column
      prop="address"
      label="地址"
      show-overflow-tooltip>
    </el-table-column>
  </el-table>
  <div style="margin-top: 20px">
    <el-button @click="toggleSelection([tableData[1], tableData[2]])">切换第二、第三行的选中状态</el-button>
    <el-button @click="toggleSelection()">取消选择</el-button>
  </div>
</template>

<script>