IviewTable组件中各种组件扩展的使用-创新互联

一、Iview Table 组件 多选框选中和禁选设置

涿鹿网站建设公司创新互联建站,涿鹿网站设计制作，有大型网站制作公司丰富经验。已为涿鹿上1000+提供企业网站建设服务。企业网站搭建\外贸网站制作要多少钱，请找那个售后服务好的涿鹿做网站的公司定做！

Table添加多选框

通过给 columns 数据设置一项，指定  type: 'selection' ，即可自动开启多选功能。

正确使用好以下事件，可以达到需要的效果：

• @on-select ，选中某一项触发，返回值为  selection  和  row ，分别为已选项和刚选择的项。
• @on-select-all ，点击全选时触发，返回值为  selection ，已选项。
• @on-selection-change ，只要选中项发生变化时就会触发，返回值为  selection ，已选项。

<template>
 <div>
  <Table ref="selection" :columns="columns" :data="data" @on-selection-change="selectChange"></Table>
 </div>
</template>

<script>
　　export default {
　　　　　　data () {
  　　　　　　return {
　　　　　　　　　　columns: [ { type: 'selection', width: 60, align: 'center' }, { title: 'Name', key: 'name' }]
　　　　　　　　}
　　　　　　},
　　　　　　methods: {
　　　　　　　　selectChange: function (data) {
　　　　　　　　　　console.log(data[i].name)
　　　　　　　　}
　　　　　　}

</script>

当前文章：IviewTable组件中各种组件扩展的使用-创新互联
网页地址：https://www.cdcxhl.com/article44/dsehhe.html

成都网站建设公司_创新互联，为您提供App设计、企业建站、服务器托管、全网营销推广、虚拟主机、外贸建站

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联