|
|
@@ -0,0 +1,171 @@
|
|
|
+<template>
|
|
|
+ <div class="tbqd">
|
|
|
+ <div>
|
|
|
+ <div class="headerInput">
|
|
|
+ <el-input v-model="input" placeholder="请输入内容"></el-input>
|
|
|
+ <span>共5条</span>
|
|
|
+ </div>
|
|
|
+ <div class="pagination">
|
|
|
+ <el-table :data="tableData" style="width: 100%" height="560">
|
|
|
+ <el-table-column
|
|
|
+ prop="index"
|
|
|
+ label="序号"
|
|
|
+ width="60"
|
|
|
+ align="center"
|
|
|
+ show-overflow-tooltip
|
|
|
+ >
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="smID"
|
|
|
+ label="图斑编号"
|
|
|
+ align="center"
|
|
|
+ show-overflow-tooltip
|
|
|
+ >
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="area"
|
|
|
+ label="监测面积"
|
|
|
+ width="80"
|
|
|
+ align="center"
|
|
|
+ show-overflow-tooltip
|
|
|
+ >
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column fixed="right" label="操作" width="90" align="center">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-button
|
|
|
+ @click="handleClick(scope.row)"
|
|
|
+ type="text"
|
|
|
+ size="small"
|
|
|
+ >定位</el-button
|
|
|
+ >
|
|
|
+ <el-button
|
|
|
+ type="text"
|
|
|
+ size="small"
|
|
|
+ @click="handleDetails(scope.row)"
|
|
|
+ >详情</el-button
|
|
|
+ >
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ <el-pagination
|
|
|
+ @size-change="handleSizeChange"
|
|
|
+ @current-change="handleCurrentChange"
|
|
|
+ :current-page="pageNum"
|
|
|
+ :page-size="pageSize"
|
|
|
+ layout="total, prev, pager, next, jumper"
|
|
|
+ :total="total"
|
|
|
+ >
|
|
|
+ </el-pagination>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+
|
|
|
+export default {
|
|
|
+ components: {
|
|
|
+
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ pageSize: 10,
|
|
|
+ pageNum: 1,
|
|
|
+ total: 10,
|
|
|
+ input: "",
|
|
|
+ tableData: [
|
|
|
+ {
|
|
|
+ index: 1,
|
|
|
+ smID: "6401812024070108270002",
|
|
|
+ area: 14.86,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ index: 1,
|
|
|
+ smID: "6401812024070108270002",
|
|
|
+ area: 14.86,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ index: 1,
|
|
|
+ smID: "6401812024070108270002",
|
|
|
+ area: 14.86,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ index: 1,
|
|
|
+ smID: "6401812024070108270002",
|
|
|
+ area: 14.86,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ isShowTb: false,
|
|
|
+ detailObj: null,
|
|
|
+ };
|
|
|
+ },
|
|
|
+ computed: {},
|
|
|
+ mounted() {},
|
|
|
+ methods: {
|
|
|
+ changeData(name, updata) {
|
|
|
+ this[name] = updata;
|
|
|
+ },
|
|
|
+ handleClick(row) {
|
|
|
+ console.log(row, "---");
|
|
|
+ },
|
|
|
+ handleDetails(row) {
|
|
|
+ this.$emit("updateParent", "isShowTb", true);
|
|
|
+ },
|
|
|
+ handleSizeChange(val) {
|
|
|
+ this.pageSize = val;
|
|
|
+ // this.getList();
|
|
|
+ },
|
|
|
+ handleCurrentChange(val) {
|
|
|
+ this.pageNum = val;
|
|
|
+ // this.getList();
|
|
|
+ },
|
|
|
+ },
|
|
|
+ watch: {},
|
|
|
+ watch: {},
|
|
|
+ beforeDestroy() {},
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less" scoped>
|
|
|
+.tbqd {
|
|
|
+ position: relative;
|
|
|
+ .headerInput {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ margin: 5px 0px;
|
|
|
+ /deep/.el-input {
|
|
|
+ height: 30px;
|
|
|
+ width: 60%;
|
|
|
+ }
|
|
|
+ /deep/.el-input__inner {
|
|
|
+ height: 30px;
|
|
|
+ background-color: rgba(45, 140, 240, 0.2);
|
|
|
+ border: 1px solid #409eff;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ /deep/ .el-input__inner::placeholder {
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ span {
|
|
|
+ width: 30%;
|
|
|
+ text-align: right;
|
|
|
+ line-height: 3;
|
|
|
+ // line-height: 30px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ /deep/.el-table__fixed-right::before {
|
|
|
+ background-color: transparent !important;
|
|
|
+ }
|
|
|
+ /deep/ .el-table__fixed-right {
|
|
|
+ background: transparent !important;
|
|
|
+ border-bottom: transparent !important;
|
|
|
+ }
|
|
|
+ // /deep/.el-table td.el-table__cell {
|
|
|
+ // border-bottom: none !important;
|
|
|
+ // border-bottom: transparent !important;
|
|
|
+ // }
|
|
|
+}
|
|
|
+
|
|
|
+</style>
|
