表头增加提示函数

// 表格中表头有提示的函数
export default{
  data() {
    return {
    }
  },
  methods: {
    /**
   * key是表头显示的内容, value是提示里面的内容,type == 1 表示是提示在文字后面,2的话提示在文字前面
   */
    tipsHeaderFun({ key, value, type = 1 }, h, data) {
      if (type == 1) { // 序号在前
        return h('span',
          {
          },
          [
            h('span', [key]),
            h('el-popover',
              {
                attrs: {
                  placement: 'top',
                  trigger: 'hover',
                  title: '',
                  width: 250
                }
              },
              [
                h('i',
                  {
                    class: 'el-icon-info',
                    style: 'color:#ccc;margin-left:5px;',
                    slot: 'reference'
                  }),
                h('div', value)
              ])
          ])
      } else { // 序号在后,提示在前
        return h('span',
          {
          },
          [
            h('el-popover',
              {
                attrs: {
                  placement: 'top',
                  trigger: 'hover',
                  title: '',
                  width: 250
                }
              },
              [
                h('i',
                  {
                    class: 'el-icon-info',
                    style: 'color:#ccc;margin-right:5px;',
                    slot: 'reference'
                  }),
                h('div', value)
              ]),
            h('span', [key])
          ])
      }
    }
  }
}

使用

<template>
  <div style="width: 100%" v-loading="formLoading">
    <el-table :data='activitiesListData' :header-row-style="tableHeadStyle" row-key='activityId' fit highlight-current-row
              :class="tableCss"
              class="customTableHead">
      <el-table-column align='center' label='活动名称' min-width="350">
        <template slot-scope='scope'>
          <div class="clearfix">
            <div class="fl margin-r10 border-radio2 c-overflow-h width100 c-max-height67">
              <img v-if="scope.row.poster" :src="scope.row.poster" class="c-width100 c-max-height67" alt="">
              <el-image v-else :src="scope.row.poster" :params="{width: '100', height: '50'}" :isImg="false"></el-image>
            </div>
            <div class="fl c-width70">
              <div class="c-fs-14 c-fc-333 c-textAlign-l c-ws-pw" :title="scope.row.name">{{scope.row.name}}</div>
              <div class="c-fs-12 color-999 c-textAlign-l line-limit-length-250" :title="scope.row.place">{{scope.row.place}}</div>
              <div class="c-fs-12 color-999 c-textAlign-l">
                {{scope.row.enrollDate}}
              </div>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column width='100' align='center' label='状态'>
        <template slot-scope='scope'>
          <div>报名:{{scope.row.applyStatus == 0 ? '未开始' : (scope.row.applyStatus == 1 ? '进行中' : '已截止')}}</div>
          <div>活动:{{scope.row.activityStatus == 0 ? '未开始' : (scope.row.activityStatus == 1 ? '进行中' : '已结束')}}</div>
        </template>
      </el-table-column>
      <el-table-column width='90' align='center' label='创建时间'>
        <template slot-scope='scope'>
          <span class="c-fc-333">{{scope.row.createdAt.split(' ')[0]}}</span>
          <div class="c-fc-333">{{scope.row.createdAt.split(' ')[1]}}</div>
        </template>
      </el-table-column>
      <el-table-column width='80' align='center' label='排序数字' :render-header="tipsHeaderFun.bind(null, tipsHeader.sort)">
        <template slot-scope='scope'>
          <change-sort :disabled="!(permission >= 3)"
            :value="scope.row.sort"
            :row="scope.row"
            @saveSort="saveSort">
          </change-sort>
        </template>
      </el-table-column>
      <el-table-column width="280" align='center' label='报名详情'>
        <template slot-scope='scope'>
          <div class="clearfix">
          <div class="margin-b10 fl c-ww50">
            <p class="color-999"><span class="c-d-inlineb c-ww50">报名人数</span><span class="c-d-inlineb c-ww50">报名成功</span></p>
            <p><span class="c-d-inlineb c-ww50">{{scope.row.enrollNum}}</span><span class="c-d-inlineb c-ww50">{{scope.row.enrollChecked}}</span></p>
          </div>
          <div class="fl c-ww50">
            <p class="color-999"><span class="c-d-inlineb c-ww50">待审核</span><span class="c-d-inlineb c-ww50">未付款</span></p>
            <p><span class="c-d-inlineb c-ww50">{{scope.row.enrollUnCheck}}</span><span class="c-d-inlineb c-ww50">{{scope.row.enrollRetuen}}</span></p>
          </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column label='操作' align='center' width='180'>
        <template slot-scope='scope'>
          <div class="c-textAlign-l" v-if="permission == 3">
            <b class="v-line" @click="linkToEdit(scope.row.activityId)">{{scope.row.enrollStatus=='已结束'? '查看': '编辑'}}</b>
            <b class="v-line" v-if="scope.row.enrollStatus !=='已结束'" @click="openInvitation(scope.row.activityId,scope.row.isInvitionCard)">邀请卡设置</b> 
          </div>
          <div class="c-textAlign-l" v-if="permission == 3">
            <b class="v-line" @click="linkToUserList(scope.row)">名单管理</b>
            <b class="v-line" @click="signManage(scope.row)">签到管理</b>           
          </div>
          <div class="c-textAlign-l" v-if="permission == 3">
            <b class="v-line" v-if="scope.row.enrollStatus=='已发布'" @click='cancelPublish(scope.row.activityId)'>取消发布</b>
            <b class="v-line" v-if="scope.row.enrollStatus=='未发布'" @click='publishActivity(scope.row.activityId,scope.row.hasTicket)'>发布活动</b> 
            <el-dropdown @command="handleCommand" trigger="click" class="v-line">
              <span class="el-dropdown-link family-PingFangSC-Regular">
                更多<i class="el-icon-arrow-down"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item :command="{ id: scope.row.activityId, name:'a'}">
                  <el-popover popper-class="c-pv40"
                    class="check" @show="getShareQrcode(scope.row.activityId)" @hide="clearShareUrl"
                    placement="left"
                    width="260"
                    trigger="hover">
                    <div v-loading="qrcodeLoading">
                      <div class="c-textAlign-c"><img :src="qrcodeImg" width="150" height="150"/></div>
                      <p class="c-textAlign-c margin-b10 c-fs-12 c-fc-333">扫一扫二维码预览</p>
                      <div class="c-width100 c-flex-row c-flex-center">
                        <el-input disabled class="width200" v-model="url"></el-input>
                        <el-button class="btn-copy margin-0auto" type="primary" @click="copyUrl(scope.row.activityId, $event)">复制</el-button>
                      </div>
                    </div>
                    <div slot="reference" style="width: 100%">分享</div>
                  </el-popover>
                </el-dropdown-item>
                <!-- <el-dropdown-item :command="{ id: scope.row.activityId, name:'b'}">签到二维码</el-dropdown-item>               -->
                <el-dropdown-item v-if="scope.row.enrollStatus =='已发布' && showWechtPush && permission==3" :command="{ id: scope.row.activityId, name:'c'}">微信推送</el-dropdown-item>
                <el-dropdown-item :command="{ id: scope.row.activityId, name:'g'}" v-if="permission==3">
                  <div @click="linkToInvitationList(scope.row.activityId)">邀请榜</div>
                </el-dropdown-item>
                <el-dropdown-item v-if="scope.row.enrollStatus =='已发布' && permission==3" :command="{ id: scope.row.activityId, name:'f'}">消息推送</el-dropdown-item>
                <el-dropdown-item v-if="scope.row.enrollStatus !='已结束' && permission==3" :command="{ id: scope.row.activityId, name:'d'}">结束活动</el-dropdown-item>
                <el-dropdown-item :command="{ id: scope.row.activityId, name:'e'}" v-if="permission==3">删除</el-dropdown-item>           
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <send-message v-if="dialogFormVisible"
      :showSendMessage="dialogFormVisible"
      :pushId="form.pushId"
      from="activity"
      @closeSendMessage="dialogFormVisible = false">
    </send-message>
    <open-invitation prodType="activities" :prodId="prodId" :isShow.sync="windowBox"></open-invitation>

  </div>
</template>
<script>
  import { addOrEditActivities } from '@/api/activities'
  import { getQRCodeImage } from '@/api/common'
  import { enableWxNotice } from '@/utils/permission'
  import { creatMessage } from '@/api/message'
  import clip from '@/utils/clipboard'
  import openInvitation from '@/components/openInvitation/index.vue'
  import { encodeUrl } from '@/utils/index'
  import sendMessage from '@/views/templatePage/sendMessage/index.vue'
  import tipsHeader from '@/utils/tipsHeader'
  import changeSort from '@/components/changeSort/index'
  export default {
    name: 'activitiesListTable',
    mixins: [tipsHeader],
    inject: ['tableHeadStyle', 'tableCss'],
    props: ['permission', 'detailUrl', 'activitiesListData', 'activityInfo', 'isShowWechatPush'],
    components: { openInvitation, sendMessage, changeSort },
    data() {
      return {
        btnLoading: false,
        pickerOptions: {
          disabledDate(time) {
            return time.getTime() < Date.now() - 24 * 60 * 60 * 1000
          }
        },
        tipsHeader: {
          sort: {
            key: '排序',
            value: '手机端列表排序按照倒序排列,序号大的,产品排在前面',
            type: 1
          }
        },
        form: {
          pushTime: '',
          title: '',
          content: '',
          sendToAll: 1,
          msgType: 1,
          linkTitle: '',
          linkUrl: '',
          pusher: null,
          receiver: null,
          pushId: null, // 课程或活动id
          pushType: null, // 1.课程,2.活动
          pushStatus: 1, // 已发送
          status: 0 // 未读
        },
        formRules: {
          content: [{ required: true, message: '推送内容不能为空', trigger: 'blur' }],
          pushTime: [{ required: true, message: '推送时间不能为空', trigger: 'blur' }],
          title: [{ required: true, message: '推送标题不能为空', trigger: 'blur' }]
        },
        dialogFormVisible: false,
        formLoading: false,
        inputParam: {
          id: -1,
          activityId: -1,
          userId: -1,
          actTicketId: -1,
          orderId: -1,
          name: '',
          opType: 3,
          mobile: '',
          fieldVal1: '',
          fieldVal2: '',
          fieldVal3: '',
          fieldVal4: '',
          fieldVal5: '',
          enrollTime: '',
          signUpTime: '',
          issuccess: -1
        },
        showWechtPush: enableWxNotice(),
        signList: [],
        listLoading: false,
        tsData: [],
        qrcodeImg: null,
        url: null,
        prodId: null,
        windowBox: false,
        qrcodeLoading: false
      }
    },
    directives: {
      focus(el, { value }, { context }) {
        if (value) {
          context.$nextTick(() => {
            el.focus()
          })
        }
      }
    },
    methods: {
      editSort(index) {
        this.activitiesListData[index].isEdit = true
        this.$set(this.activitiesListData, index, this.activitiesListData[index])
      },
      saveSort(data) {
        const { row: { activityId }, value: sort } = data
        if (sort >= 0) {
          this.activityInfo.activityId = activityId
          this.activityInfo.opType = 7
          this.activityInfo.sort = sort
          addOrEditActivities(this.activityInfo).then(res => {
            this.$message({
              type: 'info',
              message: '保存成功'
            })
            this.$emit('fresh')
          }).catch(err => {
            console.log(err)
          })
        } else {
          this.$message({
            type: 'error',
            message: '排序值不能为负数'
          })
          return
        }
        // this.activitiesListData[index].isEdit = false
      },
      getShareQrcode(id) {
        this.url = this.detailUrl + id
        this.qrcodeLoading = true
        getQRCodeImage({ url: this.detailUrl + id, type: 'activity' + id }).then(res => {
          this.qrcodeLoading = false
          this.qrcodeImg = res.data.data.img
        }).catch(() => {
          this.qrcodeLoading = false
        })
      },
      clearShareUrl() {
        this.url = ''
        this.qrcodeImg = ''
      },
      copyUrl(id, event) {
        // this.$emit(this.detailUrl + id, event)
        clip(this.detailUrl + id, event)
      },

      signManage({ activityId, name }) {
        const params_name = encodeUrl(name)
        this.$router.push({
          name: 'signManage',
          params: {
            activityId,
            name: params_name
          }
        })
      },

      handleCommand(command) {
        // this.$message('click on item ' + command)
        if (command.name == 'b') {
          this.linkToQrcode(command.id)
        } else if (command.name == 'a') {
          // this.$emit('linckDetail', command.id)
        } else if (command.name == 'c') {
          // this.pushToWechat()
          for (var i = 0; i < this.activitiesListData.length; i++) {
            if (this.activitiesListData[i].activityId == command.id) {
              this.tsData = [this.activitiesListData[i]]
              break
            }
          }
          this.$emit('wechat', this.tsData)
        } else if (command.name == 'd') {
          this.stopActivity(command.id)
        } else if (command.name == 'e') {
          this.deleteActivity(command.id)
        } else if (command.name == 'f') {
          this.form.pushType = 2
          this.form.pushId = command.id
          this.clickMessage(command.id)
        }
      },
      clickMessage(id) {
        this.dialogFormVisible = true
      },
      sendMessage() {
        this.$refs.form.validate(valid => {
          if (valid) {
            if (this.btnLoading) {
              return
            }
            this.btnLoading = true
            creatMessage(this.form).then(res => {
              this.btnLoading = false
              if (res.data.statusCode == 200) {
                this.$message({
                  message: '消息发送成功',
                  type: 'success'
                })
                this.clearForm()
              }
            }).catch((err) => {
              console.log(err)
              this.btnLoading = false
            })
          } else {
            console.log('error submit!!')
            return false
          }
        })
      },
      dialogCancel() {
        this.clearForm()
      },
      handleClose() {
        this.$confirm('确认关闭?')
          .then(_ => {
            this.clearForm()
          })
          .catch(_ => {})
      },
      clearForm() {
        this.dialogFormVisible = false
        this.form.pushTime = ''
        this.form.title = ''
        this.form.content = ''
        this.form.pushType = ''
        this.form.pmId = ''
      },
      linkToEdit(id) {
        this.$router.push({ path: `/activities/edit/${id}` })
      },

      linkToUserList({ activityId, name }) {
        const params_name = encodeUrl(name)
        this.$router.push({
          name: 'userList',
          params: {
            activityId,
            name: params_name
          }
        })
      },
      linkToTicket() {
        this.$router.push({ path: `/activities/ticketManage` })
      },

      linkToQrcode(id) {
        this.$router.push({ path: `/activities/qrcode/${id}` })
      },
      deleteActivity(id) {
        // 删除活动
        this.$confirm('此操作将永久删除该活动, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.activityInfo.activityId = id
          this.activityInfo.opType = 3
          this.formLoading = true
          addOrEditActivities(this.activityInfo).then(res => {
            this.formLoading = false
            if (res.data.data.retError == 0) {
              this.$message({
                type: 'success',
                message: '删除成功!'
              })

              this.$emit('fresh')
            }
          }).catch(_ => {
            this.formLoading = false
          })
        })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            })
          })
      },
      cancelPublish(id) {
        // 取消发布活动
        this.$confirm('取消该已发布活动?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            this.activityInfo.activityId = id
            this.activityInfo.opType = 4
            this.formLoading = true
            addOrEditActivities(this.activityInfo).then(res => {
              this.formLoading = false
              if (res.data.data.retError == 0) {
                this.$message({
                  type: 'success',
                  message: '取消发布!'
                })
                this.$emit('fresh')
              }
            }).catch(_ => {
              this.formLoading = false
            })
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '用户关闭弹框'
            })
          })
      },
      stopActivity(id) {
        // 结束活动
        this.$confirm('活动的结束时间将变成此刻,学员不能再报名和参加活动,是否确定结束活动?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.activityInfo.activityId = id
          this.activityInfo.opType = 5
          this.formLoading = true
          addOrEditActivities(this.activityInfo).then(res => {
            this.formLoading = false
            if (res.data.data.retError == 0) {
              this.$message({
                type: 'success',
                message: '该活动已结束!'
              })
              this.$emit('fresh')
            }
          }).catch(_ => {
            this.formLoading = false
          })
        }).catch(() => {
          this.formLoading = false
          this.$message({
            type: 'info',
            message: '用户关闭弹框'
          })
        })
      },
      pushToWechat() {
        // 微信推送
        this.$confirm('确定推送该活动?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            this.$message({
              type: 'success',
              message: '推送成功!'
            })
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '用户关闭弹框'
            })
          })
      },
      publishActivity(id, isTicket) {
        // 发布活动
        if (isTicket == 0) {
          this.$message({
            type: 'info',
            message: '您还没设置票务,请先设置票务再发布'
          })
          return
        }
        this.$confirm('确定发布该活动?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            this.activityInfo.activityId = id
            this.activityInfo.opType = 6
            this.formLoading = true
            addOrEditActivities(this.activityInfo).then(res => {
              this.formLoading = false
              if (res.data.data.retError == 0) {
                this.$message({
                  type: 'success',
                  message: '发布成功!'
                })
                this.$emit('fresh')
              }
            })
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '用户关闭弹框'
            })
          })
      },
      linkToInvitationList(id) {
        // 点击邀请榜
        this.$router.push({ name: 'invitationList', params: { id: id, from: 'activity' }})
      },
      openInvitation(id, isInvitationCard) {
        const type = 'activities'
        if (isInvitationCard == 1) {
          this.$router.push({ name: 'spreadSetCommons', params: { prodType: type, prodId: id }})
        } else {
          this.windowBox = true
          this.prodId = id
        }
      }
    }
  }
</script>

<style scoped>

  .el-icon-arrow-down {
    font-size: 12px;
  }


  .c-d-inlineb{
    display: inline-block;
  }
  .c-ww50{
    width: 50%;
  }
  .case {
    line-height: 23px;
    font-size: 10px;
  }
  .case>div {
    padding-left: 20px;
    color: #999;
  }
  .see:after{
    content:"|";
    color: #409EFF;
    padding: 0 3px 0 3px;
  }
</style>