一:首先说说想要做什么东西
我想要做的是这样的一个效果,首先表格能够多个选择,然后右边有一些标签(内容是表格中的一项: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"> <!–<el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>–> <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吧,不会的话可以去学习一下。