db-init-web-vue3/src/views/parts/table-1.vue

<template>
  <el-col class="list">
    <el-col :span="24" class="btn">
      <el-button type="primary" size="large" @click="toAdd()">添加表</el-button>
    </el-col>
    <div class="table">
      <el-table :data="list" border size="large" max-height="70vh" :cell-style="{ textAlign: 'center' }" :header-cell-style="{ 'text-align': 'center' }">
        <el-table-column prop="name_zh" label="表名中文"> </el-table-column>
        <el-table-column prop="name" label="表名"> </el-table-column>
        <el-table-column prop="remark" label="备注"> </el-table-column>
        <el-table-column fixed="right" label="操作">
          <template #default="scope">
            <el-button link type="primary" @click.prevent="toEdit(scope.row)">修改</el-button>
            <el-button link type="warning">导出</el-button>
            <el-button link type="warning">导出ts</el-button>
            <el-button link type="danger">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </el-col>
</template>
<script setup lang="ts">
import { reactive } from 'vue';
let list: any = reactive([]);
const props = defineProps({ list: Array });
// eslint-disable-next-line vue/no-setup-props-destructure
list = props.list;
const emit = defineEmits(['toAdd', 'toEdit']);
const toAdd = () => {
  let query: Object = { type: 'form' };
  emit('toAdd', query);
};
const toEdit = (row: { _id: string }) => {
  let query: Object = { type: 'form', id: row._id };
  emit('toEdit', query);
};
</script>

<style scoped>
.btn {
  height: 50px;
  margin: 10px 0;
  text-align: right;
  background: #86b2a5;
}
.table {
  background: #ccc;
  overflow-y: scroll;
  color: #000;
}
.table::-webkit-scrollbar {
  width: 1px;
}
.table::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background: rgba(108, 43, 43, 0.2);
}
.table::-webkit-scrollbar-track {
  border-radius: 0;
  background: rgba(0, 0, 0, 0.1);
}
</style>