ScrolledList.vue 1.2 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061
  1. <script setup>
  2. </script>
  3. <template>
  4. <div class="tables">
  5. <dv-scroll-board :config="config" style="width:340rem;height:220rem" @click="clickInfo" />
  6. </div>
  7. </template>
  8. <script>
  9. export default {
  10. data() {
  11. return {
  12. // viewersName: '', //视角标签名称
  13. // ImgurlList: [], //截图地址列表
  14. config:{
  15. header: ['设备名称', '设备类型', '设备状态','详情'],
  16. data: [
  17. ['设备一', 'A200', '正常'],
  18. ['设备二', 'C100', '正常'],
  19. ['设备三', 'B300', '正常'],
  20. ['设备四', 'E500', '正常'],
  21. ['设备五', 'B400', '正常'],
  22. ['设备六', 'F300', '正常'],
  23. ],
  24. align:['center','center','center'],
  25. headerBGC:'rgba(61, 198, 255, 0.4)',
  26. oddRowBGC:'rgba(0, 37, 98, 0.4)',
  27. }
  28. }
  29. },
  30. methods: {
  31. clickInfo(config){
  32. console.log()
  33. }
  34. },
  35. mounted() {
  36. this.config.data = this.config.data.map((item) => {
  37. item.push("<div style='color:#08C8B7' class='ScriconList'></div>");
  38. return item;
  39. })
  40. }
  41. }
  42. </script>
  43. <style lang="scss" scoped>
  44. .tables{
  45. margin-top: 10rem;
  46. }
  47. </style>