这篇文章主要介绍“vue elementui如何实现下拉表格多选和搜索功能",在日常操作中,相信很多人在vue elementui如何实现下拉表格多选和搜索功能问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答“vue elementui如何实现下拉表格多选和搜索功能"的疑惑有所帮助!接下来,请跟着小编一起来学习吧!
在elementui的基础上对下拉框和表格进行组合
模板
埃尔型
:model='dataForm '
:rules='dataRule '
ref='dataForm '
@ keyup。进入。native=' data formSubmit()'
标签宽度=' 120像素'
id='可选'
@click.native='特写'
el-select
v-model='数据表单。processdefinitionid '
占位符='请选择'
@change='handselect '
ref='select '
@点击。native=' deptogglePanel($ event ')
多个的
折叠标签
大小='中等'
埃尔选项
v-for='(项,索引)inprocessDefinition '
:key='index '
:label='item.name '
:value='item.id '
/el-option
/el-select
div v-if=' ShowTree ' class=' TreeDiv ' ref=' TableList '
el-inputplaceholder='搜索'
v型='ss '
@input='handinput '
大小='中等'
/El-输入
埃尔表
@select='handleSelectClick '
@ row-click=' handleRegionNodeClick '
@ selection-change=' handleChange '
ref=' moviesTable ' : data='成员列表'边框
:行键='getRowKeys '
:cell-
:标题-单元格-
@全选='全选'
埃尔-表格-列
type='selection '
标题对齐
="center"
align="center"
:reserve-selection="true"
width="50">
</el-table-column>
<el-table-column
v-for="(item, index) in Columns"
:key="index"
:prop="item.prop"
:label="item.label"
:show-overflow-tooltip="true">
</el-table-column>
</el-table>
</div>
</el-form>
js
<script> export default { data() { return { ss: '', visible: false, isDisabled: false, dataForm: { termName: '', //项目名称 processDefinitionId: [] }, dataRule: { processDefinitionId: [{ required: true, message: '请选择文件档案', trigger: 'change' }], termName: [{ required: true, message: '项目名称不能为空', trigger: 'blur' }], }, arr: [], processDefinition: [], //流程模板下拉框 memberList: [], // list showTree: false, Columns: [{ prop: 'number', label: '文件编码' }, { prop: 'name', label: '文件名称' }, { prop: 'typename', label: '模板类型' }, { prop: 'efilename', label: '文件类型' }, { prop: 'version', label: '版本' }, ], getRowKeys(row) { return row.id; }, multipleSelection: [], isShowSelect: true } }, created() {}, mounted() { }, watch: { isShowSelect(val) { // 隐藏select自带的下拉框 this.$refs.select.blur(); }, }, methods: { init() { this.$nextTick(() => { this.$refs['dataForm'].resetFields(); this.isDisabled = false; this.arr = []; this.multipleSelection = []; }).then(() => { //档案室文件下拉框 this.$axios.get("/term/getFileArchiveSelect").then((res) => { console.log('档案室文件下拉框:', res); if (res.data.code != 200) { this.memberList = [] } else { this.processDefinition = res.data.page.list this.memberList = res.data.page.list//表格赋值 } }) if (!this.dataForm.id) { // 新增 // this.menuListTreeSetCurrentNode() } else { this.$axios.get("/term/getTermDeatil/" + this.dataForm.id).then((res) => { console.log("项目详情:", res); if (res.data.code != 200) { // this.$message.error(res.data.msg) } else { let data = res.data.termResVO; if (data.fileArchiveIds != '') { this.dataForm.processDefinitionId = data.fileArchiveIds.split(',') } else { this.dataForm.processDefinitionId = [] } this.multipleSelection = data.child; this.rowMultipleChecked(this.multipleSelection); } }) } }).catch((error) => { console.log(error); }); }, // 表格css getCellStyle() { return "text-align:center;" }, getHeaderCellStyle() { return "background: rgba(9, 37, 56,0.1);text-align:center; background: linear-gradient(to bottom,#ffffff 0,#eeeeee 100%);padding: 4px 5px;" }, // 点击input 阻止冒泡 控制table显示隐藏 deptogglePanel(event) { this.isShowSelect = !this.isShowSelect;//隐藏select本来的下拉框 event || (event = window.event) event.stopPropagation ? event.stopPropagation() : (event.cancelBubble = true) this.showTree ? this.tableHide() : this.tableShow() }, //显示表格 tableShow() { this.showTree = true document.addEventListener('click', this.tableHideList, false) this.rowMultipleChecked(this.multipleSelection); }, //隐藏表格 tableHide() { this.showTree = false document.addEventListener('click', this.tableHideList, false) }, tableHideList(e) { if (this.$refs.tableList && !this.$refs.tableList.contains(e.target)) { this.tableHide() } }, // 点击table节点 handleRegionNodeClick(data) { this.showTree = true }, // 多选 handleSelectClick(data) { this.showTree = true }, //全选 selectAll(data) { this.showTree = true }, // selection-change表格多选框变化事件 handleChange(data) {//表格中选中的行 this.arr = []; for (let i in data) { this.arr.push(data[i].id) } this.dataForm.processDefinitionId = this.arr;//select赋值 this.multipleSelection = data; //勾选放在multipleSelection数组中 }, //表格多选框选中判断 rowMultipleChecked(multipleSelection) { console.log(multipleSelection) if (multipleSelection != null) { for (let j = 0; j < multipleSelection.length; j++) { for (let i = 0; i < this.memberList.length; i++) { if (multipleSelection[j].id == this.memberList[i].id) {//如果在后端传来的值中id存在则选中多选框 this.$nextTick(() => {//必写 if (this.$refs.moviesTable != undefined) { this.$refs.moviesTable.toggleRowSelection(this.memberList[i], true); } }) } } } } }, //删除文件档案 handselect(value) {//select和表格相关联 let data = this.multipleSelection; let arr = []; if (value.length > 0) {//删除multipleSelection(选中的所有值)中的value for (let j = 0; j < data.length; j++) { if (value.indexOf(data[j].id) == -1) { data.splice(j, 1) } } this.multipleSelection = data } else { this.multipleSelection = []; data = []; } for (let s in data) { arr.push(data[s].id) } if (arr != null) {//需要判断那些值需要取消选中 for (let i = 0; i < this.memberList.length; i++) { if (arr.indexOf(this.memberList[i].id) == -1) { this.$refs.moviesTable.toggleRowSelection(this.memberList[i], false); } } } }, //搜索 handinput() { console.log(this.ss); this.tableShow() this.$axios.get('/term/getFileArchiveSelect').then((res) => { console.log(res); if (res.data.code != 200) {} else { this.processDefinition = res.data.page.list this.memberList = res.data.page.list console.log(this.memberList) let resultData = this.memberList.filter(data => { if (data.number.indexOf(this.ss) != -1 || data.name.indexOf(this.ss) != -1 || data.typename.indexOf(this.ss) != -1 || data.version.indexOf(this.ss) != - 1 || data.efilename.indexOf(this.ss) != -1) { //可继续增加判断条件 return true; } }); this.memberList = resultData; } }) }, // 表单提交 dataFormSubmit() { this.$refs['dataForm'].validate((valid) => { if (valid) { let url = this.dataForm.id ? '/term/updateTerm' : '/term/addTerm' if (this.dataForm.id == '') { this.isDisabled = true; } this.dataForm.id = this.dataForm.id || undefined; console.log(this.dataForm); } }) }, }, } </script>
css
<style> .applicaWord .el-upload-list__item .el-icon-close-tip { display: none !important; } .treeDiv { position: absolute; top: 52px; left: -1px; z-index: 1000; width: 100%; overflow: auto; max-height: 280px; /* border: 1px solid #ccc; */ border-radius: 6px; background: #FFFFFF; } .treeDiv::-webkit-scrollbar { /*滚动条整体样式*/ width: 4px; /*高宽分别对应横竖滚动条的尺寸*/ height: 4px; } .treeDiv::-webkit-scrollbar-thumb { /*滚动条里面小方块*/ border-radius: 5px; -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); background: rgba(0, 0, 0, 0.2); } .treeDiv::-webkit-scrollbar-track { /*滚动条里面轨道*/ -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); border-radius: 0; background: rgba(0, 0, 0, 0.1); } .treeDiv .el-table { font-size: 14px; } .treeDiv .el-table /deep/ td { padding: 4px 0; } #selecTable .el-select { width: 100%; } #selecTable .el-input { width: 100%; } #kuan .el-form-item__content { width: 80%; } </style>
到此,关于“vue+elementui如何实现下拉表格多选和搜索功能”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注网站,小编会继续努力为大家带来更多实用的文章!
内容来源网络,如有侵权,联系删除,本文地址:https://www.230890.com/zhan/119053.html