element-plus表格封裝

      <el-table :data="porps.activeName === 'range'?tableList.list: []" style="width: 100%">
        <el-table-column :prop="item.key"
          :label="item.title" v-for="(item,index) in porps.activeName === 'range' ? rangeColumns: []"
          :width="item.title === '操作' ? '80': ''"
          :key="index">
          <template #default="scope">
            <!-- 通過 v-if="item.title === '操作'" 這種形式渲染當列的插槽 只能有一個默認插槽-->
            <template v-if="item.title === '操作'">
              <div class="detail" @click="goDetai(scope)">詳情</div>
            </template>
            <template v-if="item.title === '狀態'">
              <div class="detail" >{{scope.row.status}}</div>
            </template>
          </template>
        </el-table-column>
      </el-table>

import { reactive, ref, watch } from 'vue';
// 只是作為表頭渲染 title：表頭文字， key：表格el-table-column綁定的prop值
const rangeColumns = [
  {
    title: '標題',
    key: 'title',
  },
  {
    title: '來源',
    key: 'laiyuan',
  },
  {
    title: '標注人',
    key: 'name',
  },
  {
    title: '標注時間',
    key: 'date',
  },
  {
    title: '狀態',
    key: 'status',
  },
  {
    title: '標簽',
    key: 'label',
  },
]
// 表格數據
const table_list = [
  {
    date: '2016-05-03',
    name: 'Tom',
    laiyuan: '新聞網',
    title: '騰訊進軍',
    status: true,
    label: ['公司擴張', '公司擴張', '公司擴張', '公司擴張'],
  },
]
const tableList = reactive({list: table_list})