el-table-v2 / cellRenderer 예제

vite에서 jsx를 사용 하기위해 플러그인 설치

npm instsall @vitejs/plugin-vue-jsx --save

 

vite.config.js 설정

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx';

export default defineConfig({
  plugins: [vue(), vueJsx()],
  resolve: {
    alias: [
      { find: '@', replacement: '/src' },
      { find: /^~@/, replacement: '/src' }
    ],
    extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue'],
  },
})

 

<template>
  <div style="height: 100vh;">
    <el-auto-resizer>
      <template #default="{ height, width }">
        <el-table-v2
            :columns="columns"
            :data="data"
            :width="width"
            :height="height"
        />
      </template>
    </el-auto-resizer>
  </div>
</template>

<script lang="jsx">
import { h } from "vue";
import ZLText from "@/components/ZzzLab/ZLText.vue";

var me = this;

export default {
  name: "ForexFromBank",
  data: () => ({
    data: [],
    device: "mobile",
    columns: [
      {
        key: `financeName`,
        dataKey: `financeName`,
        title: `은행명`,
        width: 150,
        cellRenderer: ({ rowData }) => {

          console.log("cellRenderer")
          let render;
          if( me.width > 768) {
            render = <img src={"/Images/Finance/" + rowData.financeCode + ".png"} style="height:15px;margin-right:5px;" />
          }
          else {
            render = <img src={"/Images/Finance/" + rowData.financeCode + "_s.png"} style="height:15px;margin-right:5px;" />
          }
          return render
        },
      },
      {
        key: `exchangeRate`,
        dataKey: `exchangeRate`,
        title: `고시금액`,
        width: 150,
        cellRenderer: ({ rowData }) =>
            h(
                ZLText,
                {bold: true},
                {default: () => rowData.exchangeRate}
            )
      },
      {
        key: `exchangeRate`,
        dataKey: `exchangeRate`,
        title: `사실때`,
        width: 150,
        cellRenderer: ({ rowData }) =>(
            <img src={"/Images/Finance/" + rowData.financeCode + ".png"} style="height:15px;margin-right:5px;" />
        )
      },
      {
        key: `exchangeRate`,
        dataKey: `exchangeRate`,
        title: `파실때`,
        width: 300,
        cellRenderer: ({ rowData }) =>(
            <>
              <img src={"/Images/Finance/" + rowData.financeCode + ".png"} style="height:15px;margin-right:5px;" />
              <zl-text>{rowData.financeName}</zl-text>
            </>
        )
      },
    ],
    width: 0,
    height: 0
  }),
  created() {
    this.width = window.innerWidth;
    this.height = window.innerHeight;
    me = this;
  },
  beforeMount() {

    this.init();
  },
  mounted() {
    window.addEventListener('resize', this.handleResize);
    window.addEventListener('orientationchange', this.handleResize);
  },
  beforeUnmount() {
    window.removeEventListener('resize', this.handleResize);
    window.removeEventListener('orientationchange', this.handleResize);
  },
  methods: {
    init() {
      this.width = window.innerWidth;
      this.height = window.innerHeight;

      let financeList = [
        {financeCode: "KEBHanaBank", financeName: "KEB하나은행"},
        {financeCode: "WooriBank", financeName: "우리은행"},
        {financeCode: "KBStarBank", financeName: "KB국민은행"},
        {financeCode: "ShinhanBank", financeName: "신한은행"},
        {financeCode: "NHBank", financeName: "NH농협은행"},
        {financeCode: "IBKBank", financeName: "기업은행"},
        {financeCode: "SCBankKorea", financeName: "SC제일은행"},
        {financeCode: "CityBankKorea", financeName: "시티은행"},
        {financeCode: "SHBank", financeName: "수협은행"},
        {financeCode: "DGBBank", financeName: "대구은행"},
        {financeCode: "JeonbukBank", financeName: "전북은행"},
        {financeCode: "GyeongnamBank", financeName: "경남은행"},
        {financeCode: "JejuBank", financeName: "제주은행"},
        {financeCode: "BusanBank", financeName: "부산은행"},
      ]

      financeList.forEach((finance) => {
          this.data.push({
            financeCode: finance.financeCode,
            financeName: finance.financeName,
            exchangeRate: 1300.24,
            cashBuy: 1300.24,
            buySpread: 1.75,
            cashSell: 1300.24,
            sellSpread: 1.75,
            cashSend: 1300.24,
            sendSpread: 1.75,
            timestamp: 1678136108,
          });
        });

    },
    handleResize(event) {
      this.width = window.innerWidth;
      this.height = window.innerHeight;

      console.log(this.width, this.height);
    }
  },
}
</script>

<style>

</style>