<template><div><button-dialog@open="open"ref="dialog"width="1000px"title="內容關聯"ok-button-text="確認關聯":destroy-on-close="true"@ok="confirmAssociation"><!----><custom-table@size-changes="list" @pagination-change="list"ref="table":data="tableData":columns="columns":pagination="pagination"@selection-change="handleSelect"><template v-slot:action><el-table-column fixed="right" label="操作" width="100"><template slot-scope="scope"><el-button type="text" @click="handleContentPreview(scope.row)">內容預覽</el-button></template></el-table-column></template></custom-table></button-dialog><content-list ref="assot"></content-list></div> </template><script> import ContentList from "@/views/task/task/Components/ContentList"; import CustomTable from "@/component/table/CustomTable"; import ButtonDialog from "@/component/dialog/ButtonDialog"; import {TableListMixin} from "@/component/table/TableMixin"; import {getAction, putAction} from "../../../api"; export default {name: "ContentAssociation",mixins: [TableListMixin],components: {ButtonDialog, CustomTable,ContentList},data() {return {columns: [{type: "selection", width: "50"},/*任務名稱id*/{prop: "id", label: "ID", width: "100", sortable: true},/*內容名稱 name*/{prop: "title", label: "內容名稱", sortable: true},/*內容類型 1是圖文 2是視屏*/{prop: "content_type_name", label: "內容類型", sortable: true},/*創建人*/{prop: "username", label: "創建人", sortable: true},/*創建時間*/{prop: "created_at", label: "創建時間", sortable: true},/*業務單元*/{prop: "business_module", label: "業務單元", sortable: true},/* /!*內容狀態*!/{prop: "status_name", label: "內容狀態", sortable: true}*/],url: {list: "/content/list",put: "/task"},selected: "",tableData: [],task_id: null};},/*created() {this.list1()},*/methods: {/* list1() {},*/select(id) {this.$refs["dialog"].show();this.task_id = id;/*this.list1();*/},handleSelect(val) {// TODO: 單選好像有點問題，選中一條的情況下，無法直接點擊其他條數據更換選擇if (val && val.length !== 0) {if (val.length === 1) {this.selected = val[0].id;} else {this.$refs["table"].toggleRowSelection([val[val.length - 2]]);}} else {this.selected = "";}},/*控制按鈕打開調用此接口*/open(){getAction(this.url.list).then(res => {this.tableData = res.data})},clearSelection() {this.selected = "";this.$refs["table"].toggleRowSelection();},handleContentPreview(record) {console.log(this)this.$refs["assot"].show(record);},confirmAssociation() {putAction(this.url.put + '/' + this.task_id + '/bound', {content_id: this.selected}).then(res => {this.$message.success("綁定成功");this.$refs["dialog"].close();})}} }; </script><style scoped></style>

運行結果

總結

以上是生活随笔為你收集整理的工作271:打开弹出框调用当前页面接口的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。