wt_project_web_bak/src/views/resource/component/row1.vue

<template>
  <div class="row full-width">
    <div
      v-if="index === 0"
      class="flex flex-align-center flex-justify-start full-height padding-left cell"
    >
      <el-checkbox
        v-if="showCheckBox"
        v-model="info.checked"
        :disabled="folderChecked"
        class="padding-right"
        @change="rowChecked(row)"
      />
      <div v-else style="width: 24px" />
      <div v-if="info.type === 2">
        <img
          v-if="info.isAccess === 1"
          src="../../../assets/svg/folder/see.svg"
        />
        <img
          v-if="info.isAccess === 2"
          src="../../../assets/svg/folder/edit.svg"
        />
        <img
          v-if="info.isAccess === 3"
          src="../../../assets/svg/folder/invisible.svg"
        />
      </div>
      <div v-else>
        <img
          v-if="info.suffix === 'pdf'"
          src="../../../assets/svg/folder/pdf.svg"
        />
        <img
          v-else-if="info.suffix === 'doc'"
          src="../../../assets/svg/folder/doc.svg"
        />
        <img
          v-else-if="info.suffix === 'xls'"
          src="../../../assets/svg/folder/xls.svg"
        />
        <img v-else src="../../../assets/svg/folder/other.svg" />
      </div>
      {{ info[column.prop] }}
    </div>
    <div
      v-else
      class="flex flex-align-center flex-center flex-justify-start ml-10 full-height flex-child-average"
    >
      {{ info[column.prop] }}
    </div>
  </div>
</template>

<script>
export default {
  props: {
    row: {
      type: Object,
      default: null
    },
    column: {
      type: Object,
      default: null
    },
    index: {
      type: Number,
      default: 0
    },
    showCheckBox: {
      type: Boolean,
      default: false
    },
    folderChecked: {
      type: Boolean,
      default: false
    }
  },
  watch: {
    row: {
      handler(val) {
        this.info = val
      },
      immediate: true
    }
  },
  data() {
    return {
      info: null
    }
  },
  methods: {
    rowChecked(res) {
      this.$emit('row-change', res)
    }
  }
}
</script>

<style lang="scss" scoped>
.row {
  height: 55px;
  border-bottom: #f7f8fa solid 1px;
  .cell {
    width: 100%;
    word-break: break-word;
    text-align: left;
  }
  img {
    width: 40px;
    height: auto;
    margin-right: 10px;
  }
}
</style>