发行方列表

src/views/notice/noticeList.vue

@@ -189,7 +189,7 @@ export default {
       tableData: [],
       mockNoticeList: [],
       total: 1,
-      pageSize: 2,
+      pageSize: 10,
       pageNum: 1,
       row_ : "1",
       noticeTime_: "1",

src/views/publisher/publisherList.vue

@@ -1,3 +1,193 @@
 <template>
-    <h1>发行方管理</h1>
+  <div class="app">
+    <!-- 头部 -->
+    <div class="search-menu">
+      <div class="search-head">
+        <div>
+          <i id="search-head-text" class="el-icon-search"> 筛选搜索</i>
+        </div>
+        <div class="search-head-btn">
+          <el-button plain>重置</el-button>
+          <el-button type="primary">查询搜索</el-button>
+        </div>
+      </div>
+      <!-- 筛选发行方名称 -->
+      <div class="publisher-search">
+        <div class="publisher-name">发行方名称</div>
+        <div>
+          <el-input
+            class="search-input"
+            v-model="input"
+            placeholder="筛选发行方名称"
+          ></el-input>
+        </div>
+      </div>
+    </div>
+    <!-- 发行方列表 -->
+    <div class="publisher-list">
+      <i class="el-icon-tickets"> 发行方列表</i>
+      <el-button id="addBtn" size="small">添加</el-button>
+    </div>
+    <!-- 数据栏 -->
+    <div class="data-list">
+      <el-table :data="tableData" border style="width: 100%">
+        <el-table-column prop="id" label="ID"> </el-table-column>
+        <el-table-column prop="headPortrait" label="头像"> </el-table-column>
+        <el-table-column prop="publisherName" label="发行方名称">
+        </el-table-column>
+        <el-table-column prop="operation" label="操作">
+          <template >
+            <el-button size="mini" type="text">修改</el-button>
+            <el-popconfirm title="你确定删除本条消息吗？">
+              <el-button id="deleteBtn" size="mini" type="text" slot="reference"
+                >删除</el-button
+              >
+            </el-popconfirm>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+    <!-- 分页 -->
+    <div class="pageMenu">
+      <div id="dataNum">共{{ this.total }}条</div>
+      <el-pagination
+        background
+        layout="prev, pager, next"
+        :total="total"
+        :page-size="pageSize"
+      >
+      </el-pagination>
+    </div>
+  </div>
 </template>
+
+
+
+<script>
+export default {
+  data() {
+    return {
+      input: "",
+        tableData: [],
+      total: 10,
+      pageSize: 10,
+      pageNum: 1,
+      mockPublisher:[]
+    };
+  },
+  mounted(){
+    this.getMockPublisher();
+    this.getTableList();
+  },
+  methods: {
+    getMockPublisher() {
+      var Mock = require("mockjs");
+      var data = Mock.mock({
+        // 属性 list 的值是一个数组，其中含有 1 到 10 个元素
+        "list|1-10": [
+          {
+            // 属性 id 是一个自增数，起始值为 1，每次增 1
+            "id|+1": 1,
+            headPortrait:'@word(3, 5)',
+            publisherName:'@word(5, 10)',
+          },
+        ],
+      });
+      this.mockPublisher = data;
+    },
+    //获取数据
+    getTableList(){
+      this.tableData = this.mockPublisher.list;
+    }
+  },
+};
+</script>
+
+
+
+<style scoped>
+.search-menu {
+  /* background: red; */
+  width: 1250px;
+  height: 150px;
+  margin: 0 auto;
+  border-radius: 4px;
+  border: 1px solid #ebeef5;
+  margin-top: 30px;
+}
+.search-head {
+  display: flex;
+  justify-content: space-between;
+}
+#search-head-text {
+  margin-top: 20px;
+  margin-left: 20px;
+  font-family: PingFang SC;
+  font-size: 15px;
+}
+.search-head-btn {
+  margin-top: 20px;
+  margin-right: 20px;
+}
+.publisher-search {
+  display: flex;
+  margin-left: 58px;
+}
+.publisher-name {
+  font-size: 13px;
+  font-family: PingFang SC;
+  color: #333333;
+  margin-top: 8px;
+  margin-right: 5px;
+}
+.search-input {
+  width: 200px;
+}
+
+.publisher-list {
+  width: 1250px;
+  height: 50px;
+  margin: 0 auto;
+  border-radius: 4px;
+  border: 1px solid #ebeef5;
+  margin-top: 30px;
+  line-height: 17px;
+  display: flex;
+  justify-content: space-between;
+}
+.el-icon-tickets {
+  margin-top: 17px;
+  margin-left: 20px;
+  font-family: PingFang SC;
+  font-size: 15px;
+}
+#addBtn {
+  width: 60px;
+  height: 30px;
+  margin-top: 10px;
+  margin-right: 32px;
+}
+.data-list {
+  width: 1250px;
+  margin: 0 auto;
+  margin-top: 30px;
+}
+.data-table {
+  margin: 0 auto;
+}
+#deleteBtn {
+  margin-left: 10px;
+}
+.pageMenu {
+  width: 1283px;
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 30px;
+}
+#dataNum {
+  font-size: 13px;
+  font-family: PingFang SC;
+  margin-top: 7px;
+  margin-right: 5px;
+}
+</style>