<script setup lang="ts">
import { Avatar, TableColumn } from '@arco-design/web-vue';
import { get } from 'lodash';

const props = defineProps<{ title?: string; dataIndex?: string; width?: number }>();

const getValue = (record: object) => {
  return get(record, props.dataIndex || '', '');
};
</script>

<template>
  <TableColumn v-bind="$attrs" :title="title" :data-index="dataIndex" :width="width || 60">
    <template #cell="{ record }">
      <Avatar :size="40" shape="circle">
        <img alt="" :src="getValue(record)" :width="40" :height="40" />
      </Avatar>
    </template>
  </TableColumn>
</template>

<style scoped lang="less"></style>