1.数据表格反选
<!-- 药品弹出层结束 --> <el-dialog title="药品管理" :visible.sync="ypopen" width="60%"> <h3>请选着药品</h3> <el-table :data="ypData" border style=" 100%"> <el-table-column type="selection" width="55"></el-table-column> <el-table-column label="序号" type="index" width="50"> </el-table-column> <el-table-column prop="name" label="药品名称" width="100"> </el-table-column> <el-table-column prop="nuber" label="数量" width="100"> <template slot-scope="scope"> <el-input-number v-model="ypData.nuber" @change="handleChange" size="mini" :min="1" ></el-input-number> </template > </el-table-column> <el-table-column prop="danjia" label="单价(元）" width="60"> </el-table-column> <el-table-column prop="status" label="状态" width="60"> </el-table-column> <el-table-column fixed="right" label="操作" width="100"> <template slot-scope="scope"> <el-button @click="handleClick(scope.$index)" type="text" size="small">移除</el-button> //第一种移除方法scope.$index传入数组索引 <el-button @click.native.prevent="deleteRow(scope.$index, ypData)" //第二种移除方法 size="small"> 移除 </el-button> </template> </el-table-column> </el-table-column> </el-table> <el-button type="success" size="mini" @click="adddrawer">添加药用处方</el-button> <span slot="footer" class="dialog-footer"> <el-button @click="ypopen = false">取 消</el-button> <el-button type="primary" @click="ypopen = false">确 定</el-button> </span> </el-dialog> <!-- 药品弹出层结束 -->
<!-- 抽屉开始 -->
<el-drawer title="请添加检查单" :visible.sync="drawer" :with-header="true" :show-close="true">
<el-input v-model="gjz" style="150px" ></el-input> <el-button type="danger" size="mini">搜索</el-button>
<el-table :data="tableData" border style=" 100%" @selection-change="changeFun" ref="changeTable">
<el-table-column type="selection" width="55"></el-table-column>
<el-table-column label="序号" type="index" width="50"> </el-table-column>
<el-table-column
prop="name" label="药品名称" width="100">
</el-table-column>
<el-table-column
prop="nuber" label="数量" width="60">
</el-table-column>
<el-table-column
prop="danjia" label="单价(元）" width="60">
</el-table-column>
<el-table-column
prop="status" label="状态" width="60">
</el-table-column>
</el-table>
<el-button @click="drawer = false">取 消</el-button>
<el-button type="primary" @click="qddrawer">确 定</el-button>
<el-button type="primary" @click="fxrawer">反选</el-button>
</el-drawer>
<!-- 抽屉结束 -->
data数据----------------
tableData:[{
name:'分洛1',
nuber:1,
danjia:'5',
mony:'50',
message:'不能出',
status:'1',
},{
name:'分洛2',
nuber:1,
danjia:'5',
mony:'50',
message:'不能出12',
status:'1',
},{
name:'分洛3',
nuber:1,
danjia:'5',
mony:'50',
message:'不能出12',
status:'1',
},{
name:'分洛4',
nuber:1,
danjia:'5',
mony:'50',
message:'不能出12',
status:'1',
}
] ,
ypData:[],
Selectionval:null,
方法为---------
methods: {
changeFun(val){
this.Selectionval = val;//得到已选择的数据赋值给Selectionval
},
adddrawer(){
this.drawer=true; //打开抽屉
this.fxrawer(); //反选数据
},
fxrawer(){
if(this.ypData.length>0){
var arr=this.ypData;//把要反选的数据赋值给arr
this.$refs.changeTable.clearSelection()//清空选着状态,changeTable自己ref定义的
arr.forEach(row => {
this.$refs.changeTable.toggleRowSelection(row,true);//反选，row选中行的数据，true为设置选中
});
}
},
qddrawer(){//把抽屉选中的数据放入药品数据表格种
this.drawer=false;
console.log( this.Selectionval);
var len=this.Selectionval.length;
if (this.ypData.length == 0){
this.ypData.push(this.Selectionval[0]);//数组添加元素push
console.log(this.Selectionval[0]+"---11-----")
console.log(this.ypData+"---22-----")
}
for(var i=0;i<len;i++){
if(this.ypData.length>0){
var str=true;
this.ypData.forEach(item=>{
if(item.name!=undefined){
console.log(item.name+'-----------'+this.Selectionval[i].name)
if(item.name==this.Selectionval[i].name){
str=false;
// item.nuber= item.nuber+1;
}
}
})
if(str==true){ this.ypData.push(this.Selectionval[i]);}//如果没有添加
}
}
},
handleClick(inde){//第一种移除
console.log(inde);
this.ypData.splice(inde,1);//根据数组下标移除
},
deleteRow(index, rows) {//第二种移除，element官方
rows.splice(index, 1);
},
}