iview 定义一个按钮取消table中选中的项

  1. 之前写了ant design 中table和tag的联动,想着用iview写一个
    如图的效果:iview 定义一个按钮取消table中选中的项_第1张图片
  2. 不过在写的过程中遇到一个问题,就是定义的tag怎么让table中选中的勾选去掉,于是百度找到了解决方法https://blog.csdn.net/iorn_mangg/article/details/86003656
  3. 上代码
<template>
    <div>
        <div> <Tag v-for="item in count" :key="item.id" :name="item.id" closable @on-close="handleClose2">{{item.name}}</Tag></div>
        <Table border ref="selection"  :columns="columns4" :data="data1" @on-selection-change="onSelectionChange" ></Table>
        <Button @click="handleSelectAll(true)">Set all selected</Button>
        <Button @click="handleSelectAll(false)">Cancel all selected</Button>
    </div>
</template>

<script>
    export default {
        data () {
            return {
                count: [],
                columns4: [
                    {
                        type: 'selection',
                        width: 60,
                        align: 'center'
                    },
                    {
                        title: 'Name',
                        key: 'name'
                    },
                    {
                        title: 'Age',
                        key: 'age'
                    },
                    {
                        title: 'Address',
                        key: 'address'
                    }
                ],
                data1: [
                    {
                        name: 'John Brown',
                        age: 18,
                        address: 'New York No. 1 Lake Park',
                        date: '2016-10-03',
                        id:1
                    },
                    {
                        name: 'Jim Green',
                        age: 24,
                        address: 'London No. 1 Lake Park',
                        date: '2016-10-01',
                        id:2
                    },
                    {
                        name: 'Joe Black',
                        age: 30,
                        address: 'Sydney No. 1 Lake Park',
                        date: '2016-10-02',
                        id:3
                    },
                    {
                        name: 'Jon Snow',
                        age: 26,
                        address: 'Ottawa No. 2 Lake Park',
                        date: '2016-10-04',
                        id:4
                    }
                ]
            }
        },
        methods: {
            handleSelectAll (status) {
                this.$refs.selection.selectAll(status);
            },
            onSelectionChange(value){ //在多选模式下有效,只要选中项发生变化时就会触发 这个事件返回的值是选中的内容
                this.count = value
            },
            handleClose2 (event, name) { // 根据返回的name去匹配然后删除
                let index = "";
                 this.count.forEach((el,idx)=>{
                     if(name == el.id){
                         index = idx
                     }
                 })
                
                this.count.splice(index, 1);
                let dataIndex = ''
                this.data1.forEach((el,index)=>{
                    if(name == el.id){
                        dataIndex = index
                    }
                }) // 根据name去匹配index 然后通过toggleSelect取消选中
                this.$refs.selection.toggleSelect(dataIndex)
            },
        }
    }
</script>

4.如果对你有帮助就给个赞*

你可能感兴趣的:(iview 定义一个按钮取消table中选中的项)