1梨撞、html代碼
<el-card class="box">
<el-row :gutter="10" class="mb8">
<el-col :span="1.5"><el-button plain icon="el-icon-plus" type="primary"
@click="handleAdd">新增</el-button></el-col>
<el-col :span="1.5">
<el-button type="primary" plain icon="el-icon-download">導(dǎo)出</el-button>
</el-col>
</el-row>
<el-table :data="tableData" stripe border>
<el-table-column label="序號(hào)" type="index" align="center" width="60px">
<template slot-scope="scope">
<span>{{ scope.row['index'] }}</span>
</template>
</el-table-column>
<el-table-column label="目標(biāo)編號(hào)" prop="satCode" align="center" />
<el-table-column label="NoradID" align="center" prop="satCode" :show-overflow-tooltip="true" />
<el-table-column label="中文名" prop="deviceInfo" :show-overflow-tooltip="true" align="center" />
<el-table-column label="類別" prop="circleNo" align="center" />
<el-table-column label="目標(biāo)類別" prop="satCode" align="center" />
<el-table-column label="鬼道" prop="satCode" align="center" />
<el-table-column label="發(fā)日期" prop="satCode" align="center" />
<el-table-column label="所屬" prop="satCode" :show-overflow-tooltip="true" align="center" />
<el-table-column label="厲元時(shí)間" prop="satCode" align="center" />
<el-table-column label="半長(zhǎng)軸" prop="satCode" align="center" />
<el-table-column label="偏率" prop="satCode" align="center" />
<el-table-column label="傾角" prop="satCode" align="center" />
<el-table-column label="升交點(diǎn)地理經(jīng)度" prop="satCode" align="center" />
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template slot-scope="scope">
<el-button type="text" icon="el-icon-edit" @click="handleRest(scope.row)">修改</el-button>
<el-button type="text" icon="el-icon-edit-outline" @click="handleLook(scope.row)">查看</el-button>
<el-button type="text" icon="el-icon-delete" @click="handleDelete(scope.row)">刪除</el-button>
</template>
</el-table-column>
</el-table>
<!-- @pagination="lookList" -->
<pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize" />
</el-card>
2、script代碼
<script>
export default {
components: {
"editDialogView": () => import("./components/editDialogView.vue")
},
data() {
return {
dis:false,
// 彈窗是否展示
isShow: false,
// 標(biāo)題
title: "",
satCode: "",
options: [],
// 查詢參數(shù)
queryParams: {
isUsed: "",
satCode: "",
satName: "",
time: [],
pageNum: 1,
pageSize: 10,
},
// 表格數(shù)據(jù)
tableData: [
{
index: 1,
satCode: 111,
deviceInfo: "fuhvuv",
circleNo: 'ded'
},
{
index: 2,
satCode: 222,
deviceInfo: "sefef",
circleNo: 'vfvsd'
},
{
index: 3,
satCode: 333,
deviceInfo: "thyt",
circleNo: 'edef'
}
],
// 總條數(shù)
total: 0,
rowData: {}
}
},
methods: {
// 新增
handleAdd() {
this.title = "新增"
this.rowData = {}
this.isShow = true
},
// 查看
handleLook(row) {
this.isShow = true
this.title = "查看"
this.rowData = row
},
// 編輯
handleRest(row) {
this.isShow = true
this.title = "編輯"
this.rowData = row
},
viewClose() {
this.isShow = false
},
handleQuery() { },
hanldenChange() { },
resetQuery() { },
handleDelete() { },
}
}
</script>
3囤躁、子組件
// 通過(guò)props接收父組件列表的值
props: {
title: {
type: String,
default: () => ""
},
isShow: {
type: Boolean,
default: () => ""
},
rowData: {
type: Object,
default: () => { }
},
},
watch: {
rowData(v, old) {
#####第一種方法
this.form = {
...v
}
#####第二種方法
this.form = {
deviceInfo:v.deviceInfo,
circleNo:v.circleNo,
satCode:v.satCode
}
}
},
