Newer
Older
KaiFengPC / src / components / Table / index.vue
@zhangdeliang zhangdeliang on 23 May 2 KB 初始化项目
  1. <template>
  2. <div>
  3. <el-table ref="table" :data="data" v-bind="_option" v-on="_option">
  4. <el-table-column v-for="(column, index) in columns" :key="index" v-bind="{ ...defaultColumnOption, ...column }">
  5. <template #header v-if="column.headerRender">
  6. <template-header-render :column="column" :render="column.headerRender" />
  7. </template>
  8. <template #default="scope" v-if="column.render">
  9. <template-render :scope="scope" :render="column.render" />
  10. </template>
  11. </el-table-column>
  12. </el-table>
  13. </div>
  14. </template>
  15.  
  16. <script setup>
  17. import { ElLoading } from 'element-plus';
  18. const TemplateHeaderRender = props => {
  19. return props.render(props.column);
  20. };
  21. const TemplateRender = props => {
  22. return props.render(props.scope);
  23. };
  24. const { proxy } = getCurrentInstance();
  25. const attrs = useAttrs();
  26. const props = defineProps({
  27. columns: {
  28. type: Array,
  29. default: () => [],
  30. },
  31. options: {
  32. type: Object,
  33. default: () => {},
  34. },
  35. data: {
  36. type: Array,
  37. default: () => [],
  38. },
  39. loading: {
  40. type: Boolean,
  41. default: false,
  42. },
  43. });
  44. const { columns, data } = toRefs(props);
  45. const defaultOption = reactive({
  46. stripe: true,
  47. });
  48. const defaultColumnOption = reactive({
  49. showOverflowTooltip: true,
  50. });
  51. const loadingInstance = ref(null);
  52. const loadingDefaultOption = reactive({
  53. text: '加载中...',
  54. });
  55. const _option = computed(() => {
  56. return Object.assign({}, defaultOption, props.options, attrs);
  57. });
  58. const $table = computed(() => {
  59. return proxy.$refs.table;
  60. });
  61. watch(
  62. () => props.loading,
  63. val => {
  64. if (val) {
  65. loadingInstance.value = ElLoading.service(
  66. Object.assign({}, loadingDefaultOption, attrs, {
  67. target: proxy.$el,
  68. })
  69. );
  70. } else {
  71. loadingInstance.value && loadingInstance.value.close();
  72. }
  73. }
  74. );
  75. const getSelection = () => {
  76. return $table.selection;
  77. };
  78. defineExpose({
  79. $table,
  80. getSelection,
  81. });
  82. </script>
  83.  
  84. <style lang="scss">
  85. .el-tooltip__popper {
  86. max-width: 400px;
  87. line-height: 180%;
  88. font-size: 16px;
  89. }
  90. </style>