vue+elementui实现下拉表格多选+搜索
在elementui的基础上对下拉框和表格进⾏组合
template
<template>
<div >
<div class="bigbox" v-if="isbg" @click.native="closeup()"></div>
<el-form
:model="dataForm"
:
rules="dataRule"
ref="dataForm"
@native="dataFormSubmit()"
label-width="120px"
id="selecTable">
<el-form-item
label="⽂件档案"
prop="processDefinitionId"
id="kuan">
<el-select
v-model="dataForm.processDefinitionId"
placeholder="请选择"
@change="handselect"
ref="select"
@click.native="deptogglePanel($event)"
multiple
collapse-tags
size="medium">
<el-option
v-for="(item,index) in processDefinition"
:key="index"
:label="item.name"
:
value="item.id">
</el-option>
</el-select>
</el-select>
<div v-if="showTree"class="treeDiv" ref="tableList">
<el-input
placeholder="搜索"
v-model="ss"
@input="handinput"
size="medium"></el-input>
<el-table
@select="handleSelectClick"
@row-click="handleRegionNodeClick"
@selection-change="handleChange"
ref="moviesTable"
:data="memberList"
border
:row-key="getRowKeys"
:cell-
:header-cell-
@select-all="selectAll">
<el-table-column
type="selection"
header-align="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"
align="center"
:
show-overflow-tooltip="true">
</el-table-column>
</el-table>
</div>
</el-form-item>
</el-form>
<span slot="footer"class="dialog-footer">
<el-button type="primary" @click="dataFormSubmit()":disabled='isDisabled'>确定</el-button> </span>
</div>
</template>
js
<script>
export default{
data(){
return{
isbg:false,//整体背景
ss:'',//下拉框搜索值
isDisabled:false,//按钮重复提交
dataForm:{
processDefinitionId:[]
},
dataRule:{
/
/ processDefinitionId: [{
// required: true,
// message: '请选择⽂件档案',
// trigger: 'change'
// }]
},
arr:[],//选中⾏id
processDefinition:[//下拉框数据
{
id:1,
id:1,
number:"001",
name:'测试⽂档',
efile:2,
efilename:"纸质档",
type:4,
typename:"其他",
version:"1.0",
},
{
id:2,
number:"002",
name:'测试⽂档2',
efile:1,
efilename:"电⼦档",
type:1,
typename:"技术单",
version:"1.0",
element表格横向滚动条},
{
id:3,
number:"003",
name:'测试⽂档3',
efile:1,
efilename:"电⼦档",
type:1,
typename:"技术单",
version:"1.0",
}
],//流程模板下拉框
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,//隐藏select本来的下拉框}
},
created(){
this.init(16);
watch:{
isShowSelect(val){
isShowSelect(val){
// 隐藏select⾃带的下拉框
this.$refs.select.blur();
},
},
methods:{
init(id){
this.dataForm.id = id ||0
console.log(id)
this.$nextTick(()=>{
this.$refs['dataForm'].resetFields();
this.isDisabled =false;
this.arr =[];
this.multipleSelection =[];
}).then(()=>{
if(!this.dataForm.id){
// 新增
}else{
this.$nextTick(()=>{
this.dataForm.processDefinitionId =[1,2,3]
this.multipleSelection=this.processDefinition;
})
}
}).catch((error)=>{
console.log(error);
});
},
closeup(){
this.showTree =false
this.isbg=false
},
// 表格css
getCellStyle(){
// return "text-align:center;"
},
getHeaderCellStyle(){
return"background: rgba(9, 37, 56,0.1); background: linear-gradient(to bottom,#ffffff 0,#eeeeee 100%);padding: 1px;" },
// 点击input 阻⽌冒泡控制table显⽰隐藏
deptogglePanel(event){
this.isbg=true
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)
if(this.multipleSelection.length>0&&berList.length>0){
}
},
//隐藏表格
tableHide(){
this.showTree =false
document.addEventListener('click',this.tableHideList,false)
},
tableHideList(e){
if(this.$refs.tableList &&!this.$ains(e.target)){
this.tableHide()
}
},
// 点击table节点
// 点击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 &berList.length; i++){
if(multipleSelection[j].id ==berList[i].id){//如果在后端传来的值中id存在则选中多选框this.$nextTick(()=>{//必写
if(this.$viesTable !=undefined){
this.$berList[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){//需要判断那些值需要取消选中
console.log(arr ,berList)
for(let i =0; i &berList.length; i++){
if(arr.berList[i].id)==-1){
this.$nextTick(()=>{//必写
if(this.$viesTable !=undefined){
this.$berList[i],false);
}
})
// this.$berList[i], false);
}
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论