charge-java/admin-web/src/components/form/ExtTable.vue

<style scoped lang="scss">
:deep(.el-table thead th.el-table__cell ) {
  background: var(--el-fill-color-light);
}

/**
未生效 todo
 */
:deep(el-table td.el-table__cell  div) {
  .name-label {
    cursor: pointer;
    color: var(--el-color-primary-light-1);
  }
}

</style>
<template>
  <div>
    <el-table
        :border="border"
        :stripe="stripe"
        :height="height"
        highlight-current-row
        current-row-key="id"
        row-key="id"
        :data="dataList"
        v-loading="loading"
        @row-dblclick="handleRowDblclick"
        @selection-change="handleTableSelectionChange"
        @sort-change="handleTableSortChange">
      <template #empty>
        <el-empty></el-empty>
      </template>
      <el-table-column type="selection" align="center" width="55" v-if="selectable" fixed="left"/>
      <el-table-column
          v-for="field in state.cols"
          :key="field.prop"
          :label="field.label"
          :type="field.type"
          :column-key="field.prop"
          :width="field.width"
          :min-width="field.minWidth"
          :fixed="field.fixed"
          :render-header="field.renderHeader"
          :sortable="field.sortable"
          :resizable="!field.fixed"
          :show-overflow-tooltip="!field.fixed&&field.width>150"
          reserve-selection
      >
        <template #default="{row}">

<!--          {{field.prop}}-->
<!--          {{row}}-->
<!--          {{row[field.prop]}}-->
          <template v-if="field.type==='expand'">
            <p style="padding-left: 2em;" v-html="row[field.prop]"></p>
          </template>


          <template v-else>
            <template v-if="field.render">
              <ExtRender :func="field.render" :data="row"/>
            </template>
            <template v-else-if="field.type==='rich'">
              <p v-html="row[field.prop]"></p>
            </template>
            <template v-else-if="field.type==='dict'">
              <!--   字典-->
              <ExtDLabel v-if="field.conf.dict" :type="field.conf.dict" v-model="row[field.prop]"/>
              <ExtDLabel v-else-if="field.conf.range" :data-range="field.conf.range" v-model="row[field.prop]"/>
            </template>
            <template v-else-if="field.type==='rate'">
              <el-rate v-model="row[field.prop]" allow-half/>
            </template>
            <template v-else-if="field.type==='progress'">
              <el-progress type="circle" :percentage="row[field.prop]" :status="{'success':row[field.prop]>=100}"/>
            </template>

            <template v-else-if="field.type==='dept'||field.type==='user'">
              <el-tag v-for="(v,id) in fieldUtil.value(field,row)" :key="id">{{ v }}</el-tag>
            </template>

            <template v-else-if="field.type==='bool'">
              <ext-boolean v-model="row[field.prop]" disabled/>
            </template>

            <template v-else-if="field.type==='avatar'">
              <el-avatar :size="50" :src="u.fmt.fmtImg(row[field.prop])"/>
            </template>

            <template v-else-if="field.type==='image'">
              <ext-upload
                  v-model="row[field.prop]"
                  :multiple="field.conf?.multiple"
                  style="width: 100%"
                  mime="image"
                  readonly >

              </ext-upload>
            </template>

            <template v-else-if="field.type==='attach'">
              <ext-upload
                  v-model="row[field.prop]"
                  :multiple="field.conf?.multiple"
                  style="width: 100%"
                  mime="attach"
                  readonly  >
              </ext-upload>
            </template>

            <div v-else>{{ fieldUtil.value(field, row) }}</div>
          </template>

        </template>
      </el-table-column>

      <!--      <template v-if="column.slot" v-for="(column,idx) in cls" slot-scope="{row,index}" :slot="column.slot">
              <Input :disabled="readonly" class="z-no-border" v-model="row[column.key]"/>
            </template>-->
    </el-table>
  </div>
</template>
<script setup lang="ts" name="ExtTable">
import {reactive, onMounted,defineAsyncComponent} from 'vue';
import fieldUtil from "/@/utils/field";
import ExtDLabel from "/@/components/form/ExtDLabel.vue";
import ExtRender from "/@/components/form/ExtRender.vue";
import ExtBoolean from "/@/components/form/ExtBoolean.vue";
import u from "/@/utils/u";

const ExtUpload = defineAsyncComponent(() => import("/@/components/form/ExtUpload.vue"));

const emit = defineEmits(['on-sort-change', 'on-check-change', 'on-row-dblclick']);
const props = defineProps({
  loading: {
    type: Boolean,
    default: true
  },
  columns: {
    type: Array < IField >,
    require: true,
    default: () => []
  },
  dataList: {
    type: Array
  },
  border: {
    type: Boolean,
    default: true
  },
  height: {
    type: Number,
    default: 500
  },
  stripe: {
    type: Boolean,
    default: false
  },
  selectable: {
    type: Boolean,
    default: false
  }
})

const state: any = reactive({
  cols: [] as Array<IField>
})

onMounted(() => {
  state.cols = fieldUtil.toTableShowField(props.columns);
  console.table(state.cols)
})

const handleTableSelectionChange = (selection: any) => {
  console.log("handleTableSelectionChange>>", selection)
  emit("on-check-change", selection)
}

const handleTableSortChange = (column, prop, order) => {
  console.log("handleTableSortChange>>", column, prop, order)
  emit("on-sort-change", column)
}

const handleRowDblclick = (row, column, event) => {
  emit("on-row-dblclick", row)
}

</script>