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})