工作309:selectaccount方法接收值
生活随笔
收集整理的這篇文章主要介紹了
工作309:selectaccount方法接收值
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
<template><div><!--選擇賬號 選擇賬號的具體頁面 選擇添加賬號--><el-button icon="el-icon-plus" size="medium" @click="open" :disabled="viewMode">添加賬號</el-button><!--title表示標題 close表示取消--><el-dialog@open="open"title="選擇賬號":visible.sync="visible"@close="cancel"width="70%":append-to-body="true"><!--單選框和多選框選擇 控制內容分類--><el-form ref="account" :model="query" label-width="140px"><el-form-item label="平臺分類"><!-- <el-checkbox v-model="checked1" label="備選項1" border></el-checkbox><el-checkbox v-model="checked2" label="備選項2" border></el-checkbox> --><!--v-model默認綁定:value="query.content_type" @change="query.content_type = $event.target.value"--><grid-radio@change="ListQuery"v-model="query.platrorm_channel":border="true":options="platform_category"/></el-form-item><el-form-item label="平臺選擇"><!-- <el-checkbox v-model="checked1" label="備選項1" border></el-checkbox><el-checkbox v-model="checked2" label="備選項2" border></el-checkbox> --><grid-radco@change="ListRuery"v-model="query.platform":border="true":options="this.description"/></el-form-item><el-form-item label="部門選擇"><!-- <el-checkbox v-model="checked1" label="備選項1" border></el-checkbox><el-checkbox v-model="checked2" label="備選項2" border></el-checkbox> --><grid-radeo@change="ListCuery"v-model="query.department":border="true":options="this.departmentList2"/></el-form-item></el-form><div style="float: left;"><!--子代方法有一個·傳值傳向父級 onselect去接收這個值--><select-account :checkedData.sync="checkedData1" @seletct="onSelect" /></div><div style="clear: both"></div><template v-slot:footer><el-button @click="cancel">取 消</el-button><el-button type="primary" @click="confirm">確 定</el-button></template></el-dialog></div>
</template><script>
import GridRadco from "@/component/radio/GridRadco";
import GridRadeo from "@/component/radio/GridRadeo";
import GridRadio from "@/component/radio/GridRadio";
import AccountCard from "./AccountCard";
import SelectAccount from "./SelectAccount";
import {getAction} from "@/api";export default {name: "AccountFilterSelect",/*引入三個組件*/components: { SelectAccount, AccountCard, GridRadio,GridRadeo,GridRadco },data() {return {departmentList2:[],description:[],visible: false,width: {label: 4,content: 20,},checkedData1:[],platform_category:[],query: {},/*傳值傳到當前的界面進行保存*/accountList: []};},props:["viewMode"],methods: {ListCuery(){getAction("/account/list",{query:{platrorm_channel: '',platrorm_category:'',department_id:this.query.department,},}).then(res=>{console.log(res)this.accountList=res.data})},ListRuery(){getAction("/account/list",{query:{platrorm_channel: '',platrorm_category:this.query.platform,department_id:'',},}).then(res=>{console.log(res)this.accountList=res.data})},ListQuery(){console.log(1)getAction("/account/list",{query:{platrorm_channel: this.query.platrorm_channel,platrorm_category:'',department_id:'',}}).then(res=>{console.log(res)this.accountList=res.data})},/*控制彈窗的開啟 控制彈框得開啟*/open() {this.checkedData1=[],this.query={}console.log(this)/*動態渲染content_type接口*/getAction("/dict/list",{dict_code: "platform_category"}).then(res=>{this.platform_category=res.dataconsole.log(this.platform_category)})/*動態渲染content_type接口*/getAction("/department/publish_permission",).then(res=>{console.log(res)this.departmentList2=res.data})getAction("/account/plugin_list").then(res=>{console.log(res)this.description=res.data})this.visible = true;},/*通過confirm'繼續向上傳值*/confirm() {this.$emit("select", this.accountList);this.close();},/*取消就調用close 點擊close就將識別取消按鈕*/cancel() {this.close();},/*定義一個close得 調用取消*/close() {this.$emit("close");this.visible = false;},onSelect(data){/*把子級傳入的值*/console.log(data)this.accountList = data;}}
};
</script><style lang="scss" scoped></style>
總結
以上是生活随笔為你收集整理的工作309:selectaccount方法接收值的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 干货|手把手教你写单片机的结构体
- 下一篇: 30个值得推荐的数据可视化工具(2022