1

YM

2024-07-26 e00361c6bcbb1a56f6dcda22b91bdfcb2736e263

 src/components/table1/table1.vue

@@ -1,23 +1,50 @@
<template>
  <div>
    <el-table  :min-height="height" :data="data" >
      <el-table-column min-width="110"  :sort-method="sortAge" v-for="column in columns" :key="column.prop" :label="column.label" header-align="center">
    <el-table :height="height" :data="data" style="width: 100%">
      <el-table-column
        :sort-method="sortAge"
        v-for="column in columns"
        :key="column.prop"
        :label="column.label"
        :width="column.width"
        :show-overflow-tooltip="column.showOverflowTooltip"
        header-align="center"
      >
        <template slot-scope="scope" class="font-family">
          <template v-if="column.type === 'image'">
            <el-image :src="scope.row[column.prop]" alt="加载失败"></el-image>
          </template>
          <template v-else-if="column.type === 'button'">
            <el-button @click="handleButtonClick(column.action, scope.row)" size="small">{{ column.label }}</el-button>
            <el-button
              @click="handleButtonClick(column.action, scope.row)"
              size="small"
              >{{ column.label }}</el-button
            >
          </template>
          <template v-else>
            {{ scope.row[column.prop] }}
          </template>
        </template>
      </el-table-column>
      <el-table-column v-if="isHandle" label="操作" header-align="center" width="120">
      <el-table-column
        v-if="isHandle"
        label="操作"
        header-align="center"
        width="120"
      >
        <template slot-scope="scope">
          <el-button @click="handleAction1( scope.row)" type="success" size="mini" icon="el-icon-edit"></el-button>
          <el-button @click="handleAction2( scope.row)" type="danger" size="mini" icon="el-icon-delete"></el-button>
          <el-button
            @click="handleAction1(scope.row)"
            type="success"
            size="mini"
            icon="el-icon-edit"
          ></el-button>
          <el-button
            @click="handleAction2(scope.row)"
            type="danger"
            size="mini"
            icon="el-icon-delete"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
@@ -37,41 +64,42 @@
    },
    height: {
      type: Number,
     default () {
        return 96;
     }
    }, 
   isHandle: {
      default() {
        return 96;
      }
    },
    isHandle: {
      type: Boolean,
     default () {
        return false;
     }
      default() {
        return false;
      }
    }
  },
  methods: {
    sortAge (a, b) {
    sortAge(a, b) {
      // 自定义排序方法
      return a.age - b.age
      return a.age - b.age;
    },
    handleButtonClick (action, row) {
    handleButtonClick(action, row) {
      // 处理按钮点击事件
      // 在这里可以根据传入的 action 值执行相应的逻辑
      console.log('Button Clicked', action, row)
      console.log("Button Clicked", action, row);
    },
    handleAction1 (row) {
    handleAction1(row) {
      // 处理操作事件
      // 判断row中是否存在 describe 这个属性
      if ('describe' in row) {
        row.describe = row.describe !== '' ? decodeURIComponent(row.describe) : ''
      if ("describe" in row) {
        row.describe =
          row.describe !== "" ? decodeURIComponent(row.describe) : "";
      }
      this.$emit('amend', JSON.parse(JSON.stringify(row))) // 修改用户信息
      this.$emit("amend", JSON.parse(JSON.stringify(row))); // 修改用户信息
    },
    // 删除按钮
    async handleAction2 (row) {
      this.$emit('deleteClick', row)
    async handleAction2(row) {
      this.$emit("deleteClick", row);
    }
  }
}
};
</script>

<style scoped>
@@ -79,39 +107,40 @@
  display: flex;
  justify-content: flex-start;
}
::v-deep .el-table th,::v-deep .el-table td {
::v-deep .el-table th,
::v-deep .el-table td {
  text-align: center;
}
::v-deep .el-image__inner{
::v-deep .el-image__inner {
  width: 70px;
  height: 70px;
}
/* 表头 */
::v-deep .el-table__header{
   margin-bottom: .02rem;
::v-deep .el-table__header {
  margin-bottom: 0.02rem;
}
::v-deep .el-table__header th {
   height: .3rem;
   line-height: .3rem;
   font-size: .14rem;
  background-color: #597AA5;
  height: 0.3rem;
  line-height: 0.3rem;
  font-size: 0.14rem;
  background-color: #597aa5;
  color: white; /* 表头文字颜色为白色，增加对比度 */
  margin-bottom: .02rem !important;
  margin-bottom: 0.02rem !important;
}
/* 表格 */
::v-deep .el-table__body td {
   background-color:#DDE8F6;
   height: .3rem;
   line-height: .3rem;
   font-size: .14rem;
 color: #2C2C2C !important;
 border-bottom: .02rem solid #fff;
  background-color: #dde8f6;
  height: 0.3rem;
  line-height: 0.3rem;
  font-size: 0.14rem;
  color: #2c2c2c !important;
  border-bottom: 0.02rem solid #fff;
}
/* ::v-deep .el-table__body    {
   border-bottom: .02rem solid #fff !important;
} */
::v-deep .el-table .el-table__cell{
   font-size: 9px;
   padding: 0;
::v-deep .el-table .el-table__cell {
  font-size: 9px;
  padding: 0;
}
</style>