设备管理table页面

src/css/elementUiSelf.css

+:root {
+    --table-border-color: #c6dae0;
+    --table-head-bg-color: #fafafa;
+    --table-item-border-color: #ebeef5;
+}
+.el-input {
+    --el-input-width: 220px !important;
+}
+
+.el-select {
+    --el-select-width: 220px !important;
+}
+
+.el-form-item__label {
+    color: #000;
+}
+
+.el-table__header {
+    border-top: 1px solid var(--table-border-color);
+}
+
+.el-table__header th{
+    background-color: var(--table-head-bg-color) !important;
+    border-bottom-color: var(--table-item-border-color) !important;
+}
+.el-table__body td {
+    border-bottom-color: var(--table-item-border-color) !important;
+}
+.el-table--border .el-table__inner-wrapper:after {
+    height: 0.9px !important;
+}
+.el-table--border .el-table__inner-wrapper:after, .el-table--border:after, .el-table--border:before, .el-table__inner-wrapper:before {
+    background-color: var(--table-border-color) !important;
+}
+.el-table__border-left-patch {
+    background-color: var(--table-border-color) !important;
+    width: 0.9px;
+}
+.el-table--border:after {
+    background-color: var(--table-border-color) !important;
+}
+.el-table--border .el-table__cell {
+    border-right: none !important;
+}

src/router/index.js

@@ -6,6 +6,7 @@ import AboutView from '../views/AboutView.vue'
 import User from '../views/user.vue'
 import Layout from '../layout/index.vue'
 import Login from '../views/login/index.vue'
+import equipmentManagement from '../views/equipmentManagement/index.vue'
 
 const routes = [
     {
@@ -24,7 +25,7 @@ const routes = [
           },
           {
             path: '/device-management',
-            component: AboutView,
+            component: equipmentManagement,
             meta: { title: '设备管理' },
           },
           {

src/views/equipmentManagement/index.vue

+<template>
+  <div class="equipment-management">
+    <div class="search-box">
+      <el-form :inline="true" :model="formInline" class="demo-form-inline">
+        <el-form-item label="工序：">
+          <el-select
+            v-model="formInline.region"
+            placeholder="请选择工序"
+            clearable
+          >
+            <el-option label="Zone one" value="shanghai" />
+            <el-option label="Zone two" value="beijing" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="除尘器名称：">
+          <el-input
+            v-model="formInline.user"
+            placeholder="请选择除尘器名称"
+            clearable
+          />
+        </el-form-item>
+        <el-form-item label="设备名称：">
+          <el-input
+            v-model="formInline.user"
+            placeholder="请输入设备名称"
+            clearable
+          />
+        </el-form-item>
+        <el-form-item label="设备类型：">
+          <el-select
+            v-model="formInline.region"
+            placeholder="请选择设备类型"
+            clearable
+          >
+            <el-option label="Zone one" value="shanghai" />
+            <el-option label="Zone two" value="beijing" />
+          </el-select>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="onSubmit">搜索</el-button>
+          <el-button type="primary" @click="onSubmit">重置</el-button>
+          <el-button type="primary" @click="onSubmit">导出</el-button>
+          <el-button type="primary" @click="onSubmit">导入</el-button>
+          <el-button type="primary" @click="onSubmit">模板下载</el-button>
+        </el-form-item>
+      </el-form>
+    </div>
+    <div class="table-box">
+      <el-table :data="tableData" style="width: 100%" border>
+        <el-table-column prop="date" label="Date" width="180" />
+        <el-table-column prop="name" label="Name" width="180" />
+        <el-table-column prop="address" label="Address" />
+      </el-table>
+    </div>
+    <div class="page-box"></div>
+  </div>
+</template>
+<script setup>
+import { reactive } from "vue";
+import '@/css/elementUiSelf.css'
+
+const formInline = reactive({
+  user: "",
+  region: "",
+  date: "",
+});
+
+const onSubmit = () => {
+  console.log("submit!");
+};
+const tableData = [
+  {
+    date: "2016-05-03",
+    name: "Tom",
+    address: "No. 189, Grove St, Los Angeles",
+  },
+  {
+    date: "2016-05-02",
+    name: "Tom",
+    address: "No. 189, Grove St, Los Angeles",
+  },
+  {
+    date: "2016-05-04",
+    name: "Tom",
+    address: "No. 189, Grove St, Los Angeles",
+  },
+  {
+    date: "2016-05-01",
+    name: "Tom",
+    address: "No. 189, Grove St, Los Angeles",
+  },
+];
+</script>
+
+<style lang="scss" scoped>
+.equipment-management {
+  background: #fff;
+  height: 100vh;
+  overflow: hidden;
+    padding: 20px;
+
+  .search-box {
+  }
+}
+</style>
+<style scoped>
+/* @import "./elementUiSelf.css"; */
+</style>
\ No newline at end of file