目錄結構：

—blackList 

　　　　　　—component

　　　　　　　　　　　　—operate.vue

　　　　　　—help.js

　　　　　　—index.vue

在operate檔案中

<template>
  <div class="operate-container">
    <span v-if="isAuth('Detail')" class="tel-detail" @click="goDetail">
      <img class="marr img" src="@/assets/image/tel.png">
      <span>詳情</span>
    </span>

  </div>
</template>

<script>
import { isAuth } from 
 
'@/utils/menu'
export default {
  name: 'Operate',
  props: {
    rowData: {
      type: Object,
      default: () => {
        return null
      }
    },
    toDetail: {
      type: Function,
      default: () => {
      }
    },
    toRelease: {
      type: Function,
      default: () => {
      }
    }
  },
  data() {
    
 
return {
      isAuth
    }
  },
  methods: {
    goDetail() {
      this.toDetail(this.rowData)
    }
  }
}
</script>

在help.js檔案中

tableConfig: {
      tableProp: {
        border: true,
        'header-cell-class-name': 'table-head',
        stripe: true,
        height: 100,
        bottom: 85
      },
      column: [
        {
          prop: 
 
'index',
          label: '序號',
          align: 'center',
          fixed: 'left'
        },
        {
          prop: 'projectShortName',
          label: '註冊編號',
          align: 'center',
          width: 230
        }，
        {
          prop: 'operating',
          label: '操作',
          align: 'center',
          fixed: 'right',
          width: 200,
          render: (row, column, cell) => {
            return vm.$createElement('Operate', {
              props: {
                rowData: row,
                toDetail: vm.toDetail
              }
            })
          }
        }
      ]

在index.vue中

// 切換狀態
    toChange() {
      console.log('change')
      // this.isDialogShow = true
      // this.contentChange = 'change'
      // this.dialogTitle = '切換狀態'
    },