Vue 学习随笔系列九 -- 表格中插入图片、背景、自定义表头

表格中插入图片和icon

文章目录

• 表格中插入图片和icon
• 一、如何插入图片
• 二、文字添加背景
• • 三、表头悬浮提示语
  • 四、表头添加图标

一、如何插入图片

1、代码

<template>
  <div>
    <el-table
      size="small"
      border
      v-loading="loading"
      :data="tableData"
      @selection-change="select"
    >
      <el-table-column
        type="selection"
        width="55">
      </el-table-column>

      <el-table-column
        v-for="(item, index) in tableHead"
        :key="index"
        v-bind="item"
        align="center"
        :min-width="getMinWidth(item)"
      > 
        <template slot-scope="scope">
          <span v-if="item.prop==='status'">
            <el-image :src="formatStatus(scope.row[item.prop]).img"></el-image>
            <span :style="formatStatus(scope.row[item.prop]).style">{{ scope.row[item.prop] }}</span>
          </span>
          <span v-else>{{ scope.row[item.prop] }}</span>
        </template>

      </el-table-column> 

      <el-table-column
        label="操作"
        fixed="right"
        align="center"
        width="160"
      >
        <template slot-scope="scope">
          <span
            type="primary"
            size="mini"
            class="operate-btn"
            plain
            @click="emitEvent({eventName:'detail', params: scope.row})"
          >详情</span>

          <span
            type="primary"
            size="mini"
            class="operate-btn"
            v-show="scope.row.status === '运行'"
            plain
            @click="emitEvent({eventName:'executeOrStop', params: [{row: scope.row, mod: 'stop'}] })"
          >停止</span>
          <span
            type="primary"
            size="mini"
            class="operate-btn"
            v-show="scope.row.status === '关闭' || scope.row.status === '完成'"
            plain
            @click="emitEvent({eventName:'executeOrStop', params: [{row: scope.row, mod: 'start'}] })"
          >执行</span>

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

  </div>
</template>


<script>

  export default {
    props: {
      tableData: {
        type: Array,
        default: () => []
      },
      head: {
        type: Array,
        default: () => []
      }
    },
    data() {
      return {
        loading: true,
        columns: [],
        total: 0,
        pageNum: 1,
        pageSize: 10, 
        pageSizes: [10, 20, 50, 100],
      }
    },
    computed: {
      getMinWidth () {
        return itemColumn => {
          const len = itemColumn.label.toString().length
          return `${len * 25}px`
        }
      },
      tableHead(){
        let data = this.head
        // 根据index值对表头进行排序
        data.sort((a, b) => {
          return a.index - b.index
        })
        this.loading = false
        let columns = data.map( v=> {
          return {
            prop: v.prop,
            label: v.label
          }
        })
         return columns
      },
      formatStatus () {
        const formatMap = {
          '关闭': {
            img: require('../../../../assets/icon/stop.png'),
            style: { 'color': 'red' }
          },
          '运行': {
            img: require('../../../../assets/icon/run.png'),
            style: { 'color': '#086BFF' }
          },
          '完成': {
            img: require('../../../../assets/icon/complete.png'),
            style: { color: '#29CC51' }
          },
          '等待中': {
            img: require('../../../../assets/icon/wait.png'),
            style: { color: '#333333' }
          }
        }
        return status => {
          return formatMap[status]
        }
      }
    }, 
    methods: {
      // 分页
      handleSizeChange (val) {
        this.pageSize = val
        this.query()
      },
      // 当前页
      handleCurrentChange (val) {
        this.pageNum = val
        this.query()
      },
      // 触发查询
      emitEvent ({eventName, params}) {
        this.$emit(eventName, params)
      },
      // 选中
      select(val) {
        this.$emit('handleSelectionChange', val)
      }
    }
  }

</script>

<style lang="less" scoped>
  .operate-btn {
    color: #4597eb;
    cursor: pointer;
    margin-right: 10px;
    font-size: 12px;
  }
  
  .el-image {
    vertical-align: middle;
    margin-right: 5px;
  }
  .status-box {
    line-height: 23px;
    display: inline-block;
  }
</style>

2、效果

二、文字添加背景

1、代码

<template>
  <el-table
    border
    stripe
    size="small"
    :data="tableData"
    @selection-change="select"
  >
    <el-table-column
      type="selection"
      align="center"
      width="55">
    </el-table-column>
    <el-table-column
      label="序号"
      type="index"
      align="center"
      width="55">
    </el-table-column>

    <el-table-column
      v-for="(item, index) in columns"
      :key="index"
      v-bind="item"
      align="center"
      :min-width="getMinWidth()"
    >
    <template slot-scope="scope">
        <span v-if="item.prop==='status'">
          <el-tag :style="formatStatus(scope.row[item.prop]).style">{{ scope.row[item.prop] }}</el-tag>
        </span>
        <span v-else>{{ scope.row[item.prop] }}</span>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>

export default {
  props: ['tableData'],
  data () {
    return {
      columns: [
        {
          prop: 'xxx',
          label: 'xxx',
          'show-overflow-tooltip': true
        },
        {
          prop: 'xxx',
          label: 'xxx',
          'show-overflow-tooltip': true
        },
        {
          prop: 'status',
          label: '状态',
          'show-overflow-tooltip': true
        },
        {
          prop: 'xxx',
          label: 'xxx',
          'show-overflow-tooltip': true
        },
        {
          prop: 'draftStatus',
          label: '拟稿状态',
          'show-overflow-tooltip': true
        },
        {
          prop: 'message',
          label: '提示信息',
          'show-overflow-tooltip': true
        },
        {
          prop: 'draftTime',
          label: '拟稿时间',
          'show-overflow-tooltip': true
        },
      ]
    }
  },
  computed: {
    getMinWidth () {
      return itemColumns => {
        const len = itemColumns.label.toString().length
        return `${len * 25}px`
      }
    },
    formatStatus () {
        const formatMap = {
          '失败': {
            style: { 
              'color': '#FF6767' ,
              'border-radius': "15px", 
              'background-color': '#FFD3D3', 
              'border': '1px solid transparent'
            },
          },
          '成功': {
            style: { 
              'color': '#71D18C' ,
              'border-radius': "15px", 
              'background-color': '#95F3B0', 
              'border': '1px solid transparent'
            },
          }
        }
        return status => {
          return formatMap[status]
        }
      }
  },
  methods: {
    // 选中
    select(val) {
      this.$emit('handleSelectionChange', val)
    },
    uploadItem(row){
      this.$emit('uploadItem', row)
    },
    overViewItem(row){
      this.$emit('overViewItem', row)
    }
  }
}

</script>

<style lang="scss" scoped>
  .el-button {
    margin-left: 0px;
  }
  .operate-text {
    color: #4C68EF;
    cursor: pointer;
  }
  
</style>

2、效果

三、表头悬浮提示语

 <el-table-column
      v-for="(item, index) in tableHeadTemp"
      :key="index"
      v-bind="item"
      align="center"
      :min-width="getMinWidth(item)"
    >
      <template slot="header">
        <el-tooltip class="item" effect="light" :content="item.label" placement="top-start">
          <span>{{ item.label }}</span>
        </el-tooltip>
      </template>
    </el-table-column>
    
 <el-table-column
      v-for="(item, index) in tableHeadTemp"
      :key="index"
      v-bind="item"
      align="center"
      :min-width="getMinWidth(item)"
    >
        <template slot="header">
          <span>{{ item.label }}
            <el-tooltip class="item" effect="dark" content="双击添加SKU" placement="top-start">
              <i class="el-icon-question" style="color:#606266;" />
            </el-tooltip>
          </span>
        </template>
      </el-table-column>

四、表头添加图标

效果：

<template>
  <el-table
    border
    stripe
    size="small"
    ref="myTable"
    :data="tableData"
    @selection-change="handleSelectionChange"
  >
    <el-table-column
      type="selection"
      width="55">
    </el-table-column>
    <!-- <el-table-column
      type="index"
      label="序号"
      width="55">
    </el-table-column> -->
    <el-table-column
      v-for="(item, index) in tableColumns"
      :key="index"
      v-bind="item"
      align="center"
      :min-width="getMinWidth(item)"
    > 
      <template slot="header">
        <div v-if="item.prop==='pwd'" class="pwd-box">
          <span >{{ '密码' }}</span>
          <img src="@/assets/static/pwd-show.png" alt="" @click="pwdShowOrHide('0')">
        </div>
      </template>
      <template slot-scope="scope">
        <div >
        <span v-if="item.prop==='pwd'">{{ '********' }}</span>
        <span v-else>{{ scope.row[item.prop] }}</span>
      </div>
      </template>
    </el-table-column>

    <el-table-column
      label="操作"
      fixed="right"
      width="180px"
      align="center"
      v-if="isShowEdit"
    >
      <!-- <template #default="scope"> -->
      <template slot-scope="{ $index }">
        <span class="update-btn" size="small" @click="handleClick($event, $index, 'editItem')"
        >编辑
        </span>
        <span class="update-btn" size="small" @click="handleClick($event, $index, 'delItem')" >删除 </span>

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

<script>
export default {
  props:{
    tableData: {},
    tableColumns: {},
  },
  computed: {
    getMinWidth () {
      return itemColumns => {
        const len = itemColumns.label.toString().length
        return `${len * 25}px`
      }
    },
  },
  data () {
    return {
      isShowPwd: false,
    }
  },
  methods: {
    handleSelectionChange(val){
      this.$emit('handleSelectionChange', val)
    },
    pwdShowOrHide(val) {
      this.$emit('pwdShowOrHide', val)
    },
  }
}

</script>

<style lang="scss" scoped>
  .pwd-box {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
</style>