ElementUI+Vue实现管理中心布局＋表格管理部分（前端实现、详细）

一、页面布局

确定自己的页面布局，我是分为上下两部分，为了更好的效果，我在块内加上卡片的效果，代码如下：

<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="24">
        <div class="grid-content bg-purple">
          <el-card class="message-card">
          </el-card>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="24">
        <div class="grid-content bg-purple">
           <el-card class="form-card">
           </el-card>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<style>
.message-card {
  margin: 20px;
  padding-left: 0px;
  height: 150px;
}
.form-card {
  margin: 20px;
  margin-top: 0px;
  padding: 0px;
  height: 580px;
}
</style>

二、表格管理部分

1、标签页

在el官网中找到标签页组件

在我们写的<el-card class="form-card"></el-card>标签内写如下代码：

<el-tabs v-model="activeName" @tab-click="handleClick">
    <el-tab-pane label="路损点信息管理" name="first">
       <point-message/>//2.2组件
    </el-tab-pane>
    <el-tab-pane label="用户反馈信息管理" name="second">
        用户反馈信息管理
    </el-tab-pane>
</el-tabs>

script部分代码

<script>
export default {
  data() {
    return {
      activeName: 'second',//默认第一个出现的标签页是什么
    }
  },
}
</script>

2、组件

可以发现在<el-tab-pane></el-tab-pane>标签内可以填入不同标签页的内容，因此可以用到组件

在components文件夹中（没有的自己新建一个）新建一个vue文件，后续可以在这个文件里编写第一个标签页的内容

回到原来的文件，在script部分引入这个组件

<script>
import PointMessage from '../components/PointMessage.vue'
export default {
  data() {
    return {
      activeName: 'point',
    }
  },
  components: {
    PointMessage,
  },
}
</script>

3、组件内容（表格）

<template>
  <div>
  <!-- 
    !search：如果search变量为空（即用户没有输入搜索内容），则返回所有数据。
    data.pointType.toLowerCase().includes(search.toLowerCase())：如果data.pointType字段包含搜索内容（不区分大小写），则返回该数据。
    data.pointRoad.toLowerCase().includes(search.toLowerCase())：如果data.pointRoad字段包含搜索内容（不区分大小写），则返回该数据。
   -->
    <el-table
      ref="multipleTable"
      height="500"
      :data="
        tableData.filter(
          (data) =>
            !search ||
            data.pointType.toLowerCase().includes(search.toLowerCase()) ||
            data.pointRoad.toLowerCase().includes(search.toLowerCase())
        )
      "
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
    <!-- 表头 -->
      <!-- selection：多选框 -->
      <el-table-column type="selection" width="55"> </el-table-column>
      <!-- sortable:升序、降序 -->
      <el-table-column label="审核ID" prop="checkID" width="100" sortable>
      </el-table-column>
      <el-table-column label="管理员ID" prop="managerID" width="120" sortable>
      </el-table-column>
      <el-table-column label="路损点ID" prop="pointID" width="120" sortable>
      </el-table-column>
      <el-table-column label="所属路段" prop="pointRoad" width="120">
        <!-- 设置需要edit的字段 -->
        <template slot-scope="scope">
          <el-input
            type="text"
            v-model="scope.row.pointRoad"
            v-show="scope.row.iseditor"
          />
          <span v-show="!scope.row.iseditor">{{ scope.row.pointRoad }}</span>
        </template>
      </el-table-column>
      <!-- 设置需要edit的字段 -->
      <el-table-column label="路损点类型" prop="pointType" width="120">
        <template slot-scope="scope">
          <el-input
            type="text"
            v-model="scope.row.pointType"
            v-show="scope.row.iseditor"
          />
          <span v-show="!scope.row.iseditor">{{ scope.row.pointType }}</span>
        </template>
      </el-table-column>
      <el-table-column label="路损点图片" prop="pointImage" width="100">
        <template slot-scope="scope">
          <!-- 利用popover实现图片悬浮效果 -->
          <el-popover placement="top-start" title="" trigger="hover">
            <img
              :src="scope.row.pointImage"
              alt=""
              style="width: 150px; height: 150px"
            />
            <img
              slot="reference"
              :src="scope.row.pointImage"
              style="width: 60px; height: 60px"
            />
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column label="添加日期" prop="date" width="120">
      </el-table-column>
      <!-- 审核状态表头筛选功能 -->
      <el-table-column
        label="审核状态"
        prop="auditStatus"
        width="100"
        :filters="auditList"
        :filter-method="filterHandler"
      >
        <template slot-scope="scope">
          <el-input
            type="text"
            width="100"
            v-model="scope.row.auditStatus"
            v-show="scope.row.iseditor"
          />
          <span v-show="!scope.row.iseditor">{{ scope.row.auditStatus }}</span>
        </template>
      </el-table-column>
      <el-table-column align="right" width="270">
        <template slot="header" slot-scope="scope">
          <div class="tools">
            <div class="input">
              <!-- 输入绑定search值，与表过滤结合即可达到搜索效果 -->
              <el-input
                v-model="search"
                size="mini"
                width="150"
                placeholder="输入所属路段、路损类型"
              />
            </div>
            <div class="del">
              <el-button type="danger" icon="el-icon-delete" @click="deltable">
              </el-button>
            </div>
          </div>
        </template>
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.row, scope)"
            >Edit</el-button
          >
          <el-button
            size="mini"
            type="primary"
            @click="handleSave(scope.row, scope)"
            >Save</el-button
          >
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, tableData)"
            >Delete</el-button
          >
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          checkID: '01',
          managerID: '004',
          pointID: '051',
          pointRoad: '明德路段',
          pointType: '单向裂缝',
          pointImage: 'https://gitee.com/zbhgis/pic/raw/master/road/rd051.jpg',
          date: '2024-05-04',
          auditStatus: '否',
          iseditor: false,
        }
      ],
      auditList: [
        { text: '是', value: '是' },
        { text: '否', value: '否' },
      ],
      search: '',
      multipleSelection: [],
    }
  },
  methods: {
    handleSelectionChange(selection) {
      this.multipleSelection = selection.map((item) => item.checkID)
    },
    handleEdit(row, index) {
      row.iseditor = true
    },
    handleSave(row, index) {
      row.iseditor = false
    },
    handleDelete(index, row) {
      row.splice(index, 1)
    },
    // 批量删除
    deltable() {
      console.log(this.multipleSelection)
      if (this.multipleSelection.length == 0) {
        this.$alert('请先选择要删除的数据', '提示', {
          confirmButtonText: '确定',
        })
      } else {
        let checkArr = this.multipleSelection
        // 从后往前取索引值，这样删除所选字段后就不会影响后面元素的索引值
        for (let i = checkArr.length - 1; i >= 0; i--) {
          let index = this.tableData.findIndex(
            (item) => item.checkID === checkArr[i]
          )
          if (index !== -1) {
            this.tableData.splice(index, 1)
          }
        }
        this.$message({
          type: 'success',
          message: '删除成功!',
        })
        // )
      }
    },
    filterHandler(value, row, column) {
      const property = column['property']
      return row[property] === value
    },
  },
}
</script>
<style>
.tools {
  margin: 0;
  padding: 0;
}
.input {
  margin: 0;
  float: left;
}
.del {
  margin-left: 10px;
  margin-right: 0;
  float: left;
}
</style>