需求：點選按鈕，彈窗（這裡的彈窗使用外部元件）
效果圖：
頁面中：
“檢視詳情”點選觸發 examineBtn() 方法，
<template>
<div>
<div style="height: 73vh">
<el-table :data="showData"
style="width: 100%"
:header-cell-style="headClass">
<el-table-column type="index"
label="編号"
width="80"
header-align="center"
align="center"></el-table-column>
<el-table-column prop="name"
label="企業名稱"
width="180"
header-align="center"
align="center"></el-table-column>
<el-table-column prop="duration"
label="時長"
width="80"
header-align="center"
align="center"></el-table-column>
<el-table-column prop="address"
label="廣告位置"
header-align="center"
align="center"></el-table-column>
<el-table-column prop="companyStatus"
label="訂單狀态"
width="100"
header-align="center"
align="center">
<template scope="scope">
<span v-if="scope.row.companyStatus == 1"
style="color: #1ec6df">開啟</span>
<span v-else-if="scope.row.companyStatus == 0"
style="color: #df721e">關閉</span>
</template>
</el-table-column>
<el-table-column prop="openDate"
label="開始時間"
width="180"
header-align="center"
align="center"></el-table-column>
<el-table-column prop="closeDate"
label="結束時間"
width="180"
header-align="center"
align="center"></el-table-column>
<el-table-column prop="isSend"
label="生效狀态"
width="130"
header-align="center"
align="center">
<template scope="scope">
<span v-if="scope.row.isSend == 1"
style="color: #1ec6df">已生效</span>
<span v-else-if="scope.row.isSend == 0"
style="color: #df721e">未生效</span>
</template>
</el-table-column>
<el-table-column prop="isSend"
label="發票是否郵寄"
width="140"
header-align="center"
align="center">
<template scope="scope">
<span v-if="scope.row.isSend == 1"
style="color: #1ec6df">已郵寄</span>
<span v-else-if="scope.row.isSend == 0"
style="color: #df721e">未郵寄</span>
</template>
</el-table-column>
<el-table-column fixed="right"
label="操作"
width="150">
<template>
<el-button @click="examineBtn"
type="text"
size="small"
style="padding: 0">檢視詳情</el-button>
</template>
</el-table-column>
</el-table>
</div>
<div class="block">
<el-pagination :page-size="pagesize"
:current-page="currentPage"
layout="prev, pager, next"
:total="companyData.length"
@current-change="handleCurrentChange"
@prev-click="upChange"
@next-click="nextChange"
style="text-align: center;">
</el-pagination>
</div>
<recordsDetail ref="msgBtn"></recordsDetail>
</div>
</template>
js引入元件：
<script>
import recordsDetail from "../../../components/recordsDetail/Index"; //導入元件
export default {
name: "publidetail",
components: {
//挂載元件
recordsDetail, //自定義的标簽
},
//頁面第一次加載 顯示的資料
created() {
this.showData = this.companyData.slice(0, this.pagesize);
},
data() {
return {
showData: [],
pagesize: 7, //一頁的資料條數
currentPage: 1, //目前頁是從哪頁開始
//頁面的所有資料
companyData: [
{
name: "企業名稱111",
companyStatus: 1,
address: "陝西省西安市雁塔區高新三路銀河國際D座112345",
openDate: "2016-05-04",
closeDate: "2016-05-04",
duration: 10,
isSend: "0",
},
{
name: "企業名稱222",
companyStatus: 1,
address: "陝西省西安市雁塔區高新三路銀河國際D座112345",
openDate: "2016-05-04",
closeDate: "2016-05-04",
duration: 10,
isSend: "0",
},
{
name: "企業名稱333",
companyStatus: 1,
address: "陝西省西安市雁塔區高新三路銀河國際D座112345",
openDate: "2016-05-04",
closeDate: "2016-05-04",
duration: 10,
isSend: "0",
},
{
name: "企業名稱444",
companyStatus: 1,
address: "陝西省西安市雁塔區高新三路銀河國際D座112345",
openDate: "2016-05-04",
closeDate: "2016-05-04",
duration: 10,
isSend: "0",
},
],
};
},
methods: {
//點選檢視詳情
examineBtn() {
console.log("檢視詳情");
this.$refs.msgBtn.init();
},
},
};
</script>
元件：
<template>
<div class="wrapper">
<div id="msgbox">
<el-dialog :visible.sync="examineBtn"
width="1000px">
<el-form label-width="130px"
class="item">
<div class="invoice">
<div class="title">訂單資訊</div>
<el-form-item label="企業名稱：">xxxx</el-form-item>
<el-form-item label="時長：">www</el-form-item>
<el-form-item label="廣告位置">eeee</el-form-item>
<el-form-item label="開始時間">rrrr</el-form-item>
<el-form-item label="結束時間">tttt</el-form-item>
<el-form-item label="生效狀态：">1111</el-form-item>
<el-form-item label="訂單狀态：">1111</el-form-item>
<el-form-item label="發票是否郵寄：">1111</el-form-item>
<el-form-item label="是否開票：">1111</el-form-item>
</div>
<div class="invoice">
<div class="title">企業權限</div>
<el-form-item label="崗位釋出數量：">yyyyy</el-form-item>
<el-form-item label="檢視履歷次數：">yyyyyyy</el-form-item>
<el-form-item label="崗位釋出權限：">qqq</el-form-item>
<el-form-item label="檢視人才權限：">qqqqq</el-form-item>
<el-form-item label="現場招聘次數：">qqq</el-form-item>
<el-form-item label="櫥窗釋出次數：">qqqqq</el-form-item>
<!-- <el-form-item label="現場招聘次數：">{{ form.province }}{{ form.city }}{{ form.prreceiveAddressvince }}</el-form-item> -->
</div>
</el-form>
</el-dialog>
</div>
</div>
</template>
<script>
export default {
components: {},
data() {
return {
form: {},
examineBtn: false,
};
},
methods: {
init() {
console.log("這是詳情元件");
this.examineBtn = true;
},
},
};
</script>
<style >
.item .title {
color: #1ec6df;
font-size: 18px;
font-weight: 700;
margin: 10px 0;
}
.invoice {
width: 450px;
display: inline-block;
vertical-align: top;
}
.item .el-form-item__label {
color: #000 !important;
font-weight: 700 !important;
}
</style>
![vue時間段選擇器實作的功能[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)