ElementUi的table表格多选和可移除标签的联动

最新推荐文章于 2024-03-07 13:04:32 发布

zhenyu-s5

最新推荐文章于 2024-03-07 13:04:32 发布

阅读量1.7k

点赞数 3

分类专栏：开发摘录文章标签： element-ui vue 表格标签联动

本文链接：https://blog.csdn.net/qq_36022290/article/details/84988818

版权

开发摘录专栏收录该内容

10 篇文章 0 订阅

订阅专栏

一：首先说说想要做什么东西

查看效果https://czy-1257069199.cos.ap-beijing.myqcloud.com/html/test/%E8%A1%A8%E6%A0%BC%E9%80%89%E6%8B%A9%E5%92%8C%E5%8F%AF%E5%88%A0%E9%99%A4%E6%8C%89%E9%92%AE%E7%9A%84%E8%81%94%E5%8A%A8.html

我想要做的是这样的一个效果，首先表格能够多个选择，然后右边有一些标签（内容是表格中的一项：name），最后表格的选择和标签能够完成联动，就是能够增加/删除一个或多个两边都有效果。

二：废话不多说，直接上代码

由于我是在Vue的脚手架里面写的，但是想要直接拿出来能够直接粘贴进去就能运行，所以改成了一个HTML。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>角色添加用户</title>
    <link rel="stylesheet" href="css/element-ui-index.css">
    <script src="js/vue.js"></script>
    <script src="js/element-ui-index.js"></script>
    <style>
        .role-user-search{
            width: 120px;
        }
        .el-tag{
            margin-left: 10px;
        }
        .el-tag + .el-tag {
            margin-left: 10px;
            margin-top: 10px;
        }
        .button-new-tag {
            margin-left: 10px;
            height: 32px;
            line-height: 30px;
            padding-top: 0;
            padding-bottom: 0;
        }
        .input-new-tag {
            width: 90px;
            margin-left: 10px;
            vertical-align: bottom;
        }
    </style>
</head>
<body>
<div id="app">
    <div class="demo-input-suffix">
        账号：
        <el-input
                class="role-user-search"
                placeholder="请输入账号"
                v-model="input2">
        </el-input>
        邮箱：
        <el-input
                class="role-user-search"
                placeholder="请输入账号"
                v-model="input3">
        </el-input>
        手机：
        <el-input
                class="role-user-search"
                placeholder="请输入账号"
                v-model="input4">
        </el-input>
        <el-button>查询</el-button>
        <el-button type="primary">重置</el-button>
    </div>
    <br/>
        <el-container>
            <el-main>
                <el-table
                    @select="select"
                    @cell-click="cellClick"
                    fit
                    stripe
                    border
                    ref="multipleTable"
                    :data="tableData3"
                    tooltip-effect="dark"
                    style="width: 100%"
                    @selection-change="handleSelectionChange">
                <el-table-column
                        align="center"
                        type="index"
                        width="50">
                </el-table-column>
                <el-table-column
                        align="center"
                        type="selection"
                        width="55">
                </el-table-column>
                <el-table-column
                        prop="name"
                        label="登录账号"
                        width="120">
                </el-table-column>
                <el-table-column
                        fit
                        prop="email"
                        label="电子邮箱"
                >
                </el-table-column>
                <el-table-column
                        prop="tel"
                        label="手机号码"
                >
                </el-table-column>
                <el-table-column
                        label="更新日期"
                >
                    <template slot-scope="scope">{{ scope.row.date }}</template>
                </el-table-column>
                <el-table-column
                        prop="style"
                        label="状态"
                        width="120">
                </el-table-column>
                <!--<el-table-column label="操作" show-overflow-tooltip>
                    <template slot-scope="scope">
                        &lt;!&ndash;<el-button
                                size="mini"
                                @click="handleEdit(scope.$index, scope.row)">编辑</el-button>&ndash;&gt;
                        <el-button
                                size="mini"
                                type="danger"
                                @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                    </template>
                </el-table-column>-->
            </el-table>
            </el-main>
            <el-aside width="200px">
                <div style="width: calc(100% - 22px);height:calc(100% - 40px);margin: 10px;border: 1px solid #ebeef5;margin-top: 20px">
                    <el-tag
                            :key="tag.name"
                            v-for="tag in dynamicTags"
                            closable
                            :disable-transitions="false"
                            @close="handleClose(tag)">
                        {{tag.name}}
                    </el-tag>
                </div>
            </el-aside>
        </el-container>
    <div style="margin-top: 20px">
        <div class="block">
            <el-pagination
                    background
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage4"
                    :page-sizes="[100, 200, 300, 400]"
                    :page-size="100"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="400">
            </el-pagination>
        </div>
    </div>
    <el-row>
        <el-button>确定</el-button>
        <el-button type="primary">关闭</el-button>
    </el-row>
</div>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                dynamicTags: [],
                currentPage4: 4,
                input1:'',
                input2:'',
                input3:'',
                input4:'',
                tableData3: [{
                    style:'在职',
                    tel:'1686868686',
                    email:'111111@qq.com',
                    date: '2016-05-03',
                    name: '村安林',
                    address: '上海市普陀区金沙江路 1517 弄',
                }, {
                    style:'在职',
                    tel:'1686868686',
                    email:'2222222@qq.com',
                    date: '2016-05-02',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    style:'在职',
                    tel:'1686868686',
                    email:'333333@qq.com',
                    date: '2016-05-04',
                    name: '郭果',
                    address: '上海市普陀区金沙江路 1519 弄'
                }],
                multipleSelection: []
            }
        },
        methods:{
            handleClose(tag) {
                let delTag=tag;
                let multipleSelection2=this.multipleSelection;
                let length=this.multipleSelection.length;
                let that=this;
                function search(arr,dst){//返回寻找当前元素的index
                    var i = arr.length;
                    for (let j = 0; j < i; j++) {
                        if (arr[j] == dst){
                            return j;
                        }
                    }
                    return false;
                }
                //console.log(search(that.tableData3,delTag))
                this.$refs.multipleTable.clearSelection();//清空所有选择
                let arr=[];//存储剩下的选项
                for (let i = 0; i < length; i++) {
                    if ((multipleSelection2[i])!=delTag) {//如果当前项是删除的那一项
                        let num=search(that.tableData3,multipleSelection2[i]);
                        //that.$refs.multipleTable.toggleRowSelection(row);
                        arr.push(that.tableData3[num])
                    }
                }
                //console.log(arr)
                that.toggleSelection(arr)
                this.dynamicTags=arr;
                //this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);//删除当前标签
                //delTag:当前删除标签的对应的哪一行的数据

            },
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
            },
            rowClick(row, event, column){
                //console.log(row)
            },
            cellClick(row, column, cell, event){
                //console.log(row)
                //console.log(column)
                //console.log(cell.innerText)
                //console.log(event)
            },
            handleEdit(index, row) {
                console.log(index, row);
            },
            handleDelete(index, row) {
                console.log(index, row);
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
                //console.log(this.multipleSelection)
                this.dynamicTags=val;
            },
            select(selection, row){
                //console.log(selection)
            },
            toggleSelection(rows) {
                if (rows) {
                    rows.forEach(row => {
                        this.$refs.multipleTable.toggleRowSelection(row);
                    });
                } else {
                    this.$refs.multipleTable.clearSelection();
                }
            },
        }
    })
</script>
</body>
</html>

三：到这里就结束了

由于是摘出来的，注释没有几个，不过代码比较少，应该能看懂...，还有一点就是ElementUI的js、css和Vue的js要改成自己的地址，或者直接用cdn也行。还有一点就是如果想要把表格和标签分成两个模块来写的话就用vuex吧，不会的话可以去学习一下。

zhenyu-s5

关注

3
点赞
踩
5

收藏

觉得还不错? 一键收藏
3
评论
ElementUi的table表格多选和可移除标签的联动

一：首先说说想要做什么东西查看效果https://czy-1257069199.cos.ap-beijing.myqcloud.com/html/test/%E8%A1%A8%E6%A0%BC%E9%80%89%E6%8B%A9%E5%92%8C%E5%8F%AF%E5%88%A0%E9%99%A4%E6%8C%89%E9%92%AE%E7%9A%84%E8%81%94%E5%8A%A8.ht...
复制链接

扫一扫