vue 显示一段8行4列的表格，黑色边框，里面文字居中显示，第1列和第3列是固定文字，第2列和第4列是后台传来的l,表格高60px,宽90px,线条加宽，表格上有文字和图标，写出代码

在Vue中创建一个如您所述的表格，可以使用Element UI库来简化布局和样式，因为它提供了一个丰富的表格组件。假设您已经安装了Element UI，以下是一个示例代码：

<template>
  <div class="table-container">
    <el-table :data="tableData" style="width: 90px; height: 60px;">
      <el-table-column fixed>第1列固定内容</el-table-column>
      <el-table-column prop="column2" label="第2列" :formatter="formatContent" width="45"></el-table-column>
      <el-table-column fixed>第3列固定内容</el-table-column>
      <el-table-column prop="column4" label="第4列" :formatter="formatContent" width="45"></el-table-column>
    </el-table>
    <!-- 表格上方的文字和图标 -->
    <span class="table-text">表格上部文字</span>
    <i class="table-icon iconfont" :class="{ 'icon-xxx': isIconActive }"></i>
  </div>
</template>

<script>
import { defineComponent, ref } from 'vue';
import { ElTable, ElTableColumn } from "element-plus";

export default defineComponent({
  components: {
    ElTable,
    ElTableColumn
  },
  data() {
    return {
      tableData: [
        { column2: '后台数据1', column4: '后台数据2' },
        { column2: '后台数据3', column4: '后台数据4' },
        // 其他7行数据...
      ],
      isIconActive: false,
    };
  },
  methods: {
    formatContent(value) {
      return value;
      // 如果需要居中显示，可以添加CSS样式，例如：
      // return `<div style="text-align: center;">${value}</div>`;
    }
  }
});
</script>

<style scoped>
.table-container {
  border: 1px solid black;
  display: flex;
  justify-content: space-between;
}

.el-table {
  border-collapse: collapse;
  line-height: 1.5;
}

.table-text {
  margin-top: 10px;
}

.table-icon {
  font-size: 18px;
}
</style>

注意：`isIconActive` 可以通过绑定事件或者v-model控制图标的状态。`icon-xxx` 应该替换成实际使用的字体图标名。