index.vue 1.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566
  1. <template>
  2. <div class="test">
  3. <h1>用户名: {{ customize.username }}</h1>
  4. <br>
  5. <div
  6. v-for="(row, key) in optionData"
  7. :key="key"
  8. class="item"
  9. @click="linkage(row)"
  10. >
  11. <span> {{ row[option.xField] }}</span> -
  12. <span> {{ row[option.yField] }}</span>
  13. </div>
  14. </div>
  15. </template>
  16. <script>
  17. export default {
  18. name: 'TestC',
  19. components: {
  20. },
  21. props: {
  22. config: {
  23. type: Object,
  24. default: () => ({})
  25. }
  26. },
  27. data () {
  28. return {
  29. }
  30. },
  31. computed: {
  32. option () {
  33. return this.config.option
  34. },
  35. optionData () {
  36. return this.option.data
  37. },
  38. customize () {
  39. return this.option.customize
  40. }
  41. },
  42. methods: {
  43. linkage (row) {
  44. this.$emit('linkage', row)
  45. }
  46. }
  47. }
  48. </script>
  49. <style lang="scss" scoped>
  50. .test {
  51. font-size: 20px;
  52. position: absolute;
  53. width: 100%;
  54. height: 100%;
  55. color: #fff;
  56. .item {
  57. line-height: 50px;
  58. width: 100%;
  59. height: 50px;
  60. text-align: center;
  61. }
  62. }
  63. </style>