<template>
  <el-table border :model="cols" :data="data" />
</template>

<script>
import { ref } from "vue";
export default {
  name: "App",
  setup(props, context) {
    const cols = ref([
      { title: "test1", prop: "test1", titleContent: "test1-1" },
      { title: "test2", prop: "test2", titleContent: "2ss-test2-2" },
      { title: "test3", prop: "test3", titleContent: "2ss-test2-2" },
      { title: "test4", prop: "test4", titleContent: "2ss-test2-2" },
    ]);
    const array = []; // 需要通过循环去设置每一项的值
    for (let i = 0; i < 100; i++) {
      array.push({
        test1: `aaa${i}1`,
        test2: `aaa${i}2`,
        test3: `aaa${i}3`,
        test4: `aaa${i}4`,
      });
    }
    const data = ref(array);
    return {
      cols,
      data,
    };
  },
  data() {
    return {
      value2: [],
    };
  },
  methods: {},
};
</script>
<style lang="scss" scoped>
.width100 {
  width: 200px;
}
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
  background-color: #f5f5f5;
}
/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background-color: #1c88ee;
}
/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track {
  border-radius: 10px;
  background-color: #efefef;
}
.flex {
  display: flex;
}
.tag {
  width: 50px;
  height: 50px;
}

.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>
