表格多选与单选

【多选】
渲染的表格数据需要多选,并且翻到下一页时,保留前一页所选择的内容。
组件中支持这种模式下的状态保留以及筛选条件。

  <el-table
        border
        size="small"
        ref="multipleTable"
        :data="objtable"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
        :row-key="getRowKeys"
      >
        <el-table-column type="selection" :reserve-selection="true" width="50" prop="id"></el-table-column>
  </el-table>
  data() {
    return {
      getRowKeys(row) {
        return row.id;
      },
      selectedData: [],
      objtable:[] 
      }
   }
 handleSelectionChange(rows) {
      this.selectedData = [];
      if (rows) {
        rows.forEach(row => {
          if (row) {
            this.selectedData.push(row.id);
          }
        });
      }
      // console.log(this.selectedData);
    },

handleSelectionChange多选事件,selectedData存储所选数据,getRowKeys返回所取对象中的某属性值,objtable列表数据。

【单选】
表格的单选中,组件只提供了单选之后用色块来显示,这样用户体验效果不是很好。
可以在选中之后增加一个单选框来显示选中的效果,使得选中的一行展示更加明显。

<el-table
        ref="singleTable"
        :data="masterdata"
        highlight-current-row
        size="small"
        border
        @current-change="masterchoose"
        @row-click="JoinshowRow"
        style="width: 100%"
      >
        <el-table-column fix="left" width="50" align="center">
          <template slot-scope="scope">
            <el-radio class="radio" v-model="theradio" :label="scope.$index">&nbsp;</el-radio>
          </template>
        </el-table-column>
</el-table>
 data() {
    return {
      theradio:'',
      masterdata:[] 
      }
   }
 JoinshowRow(row) {
      this.theradio = this.masterdata.indexOf(row);
    },
masterchoose(val) {
      this.currentRow = val;
    },

theradio单选框的状态,JoinshowRow展示单选框当前状态,masterchoose获取所选行的数据,masterdata为列表数据。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 专业考题类型管理运行工作负责人一般作业考题内容选项A选项B选项C选项D选项E选项F正确答案 变电单选GYSZ本规程...
    小白兔去钓鱼阅读 9,059评论 0 13
  • 界面是软件与用户交互的最直接的层,界面的好坏决定用户对软件的第一印象。而且设计良好的界面能够引导用户自己完成...
    A梦想才让心跳存在阅读 1,065评论 0 4
  • 前段时间分享过一个支持单选的穿梭器(列表框左右双向选择)案例,很多朋友觉得很赞,同时也想进一步学习并掌握支持单...
    十月大神阅读 1,590评论 4 4
  • 持续性万念俱灰,间歇性世间万物与我无关。总是会有这种感觉,我知道,我抑郁了。很难受,头很痛,眼神里没有光,笑不出来...
    城南九时阅读 148评论 0 0
  • 外面飘起了不大不小的雨,淅淅沥沥,润物无声,那么轻柔,温婉,如同举止优雅的少女,挟着南国特有的风,将城市笼于...
    树叶有翅膀阅读 318评论 0 0