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">导出</el-button>
</el-col>
</el-row>
<el-table :data="tableData" stripe border>
<el-table-column label="序号" type="index" align="center" width="60px">
<template slot-scope="scope">
<span>{{ scope.row['index'] }}</span>
</template>
</el-table-column>
<el-table-column label="目标编号" 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="目标类别" prop="satCode" align="center" />
<el-table-column label="鬼道" prop="satCode" align="center" />
<el-table-column label="发日期" prop="satCode" align="center" />
<el-table-column label="所属" prop="satCode" :show-overflow-tooltip="true" align="center" />
<el-table-column label="厉元时间" prop="satCode" align="center" />
<el-table-column label="半长轴" prop="satCode" align="center" />
<el-table-column label="偏率" prop="satCode" align="center" />
<el-table-column label="倾角" prop="satCode" align="center" />
<el-table-column label="升交点地理经度" 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,
// 标题
title: "",
satCode: "",
options: [],
// 查询参数
queryParams: {
isUsed: "",
satCode: "",
satName: "",
time: [],
pageNum: 1,
pageSize: 10,
},
// 表格数据
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'
}
],
// 总条数
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、子组件
// 通过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
}
}
},
