element封装 table表格，插槽的使用，修改el-table-column的值

本文介绍: element 封装 table 表格，插槽的使用，修改 el–table–column的值

举例 vue2这种不封装的直接写的很罗嗦麻烦下面圈起来的可以 封装 一个 对象进行循环

弊端: 循环后无法进行获取 更改某一列的值比如 data 日期我需要 转换年月日

不循环我直接在这个 el–table–column的这一列进行写（如下）

&lt;el-table-column label="日期" width="110" align="center"&gt;
        &lt;template slot-scope="scope"&gt;
          {{ scope.row.data| dataFilter}} 
        </template&gt;
</el-table-column&gt;

在这里插入图片描述

 <template&gt;
    <el-table
      :data="tableData"
      style="width: 100%"&gt;
      <el-table-column
        prop="date"
        label="日期"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址">
      </el-table-column>
    </el-table>
  </template>

  <script>
    export default {
      data() {
        return {
          tableData: [{
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          }, {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1517 弄'
          }, {
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄'
          }, {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄'
          }]
        }
      }
    }
  </script>

但是我们 循环的话怎么更改这个 指定的一列呢

解决：插槽进行解决 vue3举例原理是一样的

新建 user.vue 父组件

<template>
  <div class="user"> 
    <div class="content">
      <Hy-table :listData="userList" :propList="propList">
        <template #status="scope">
          <el-button :type="scope.row.enable ? 'success' : 'error'">
            {{ scope.row.enable ? '启用' : '禁用' }}
          </el-button>
        </template>
        <template #createAt="scope">
          {{ scope.row.createAt }}
        </template>
      </Hy-table>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, computed } from 'vue' 
 //引入table.vue
import HyTable from '@/base-ui/table' 
export default defineComponent({
  name: 'user', 
  components: {HyTable }, 
  setup() { 
  //真实渲染数据
    const userList = [
		{
		  cellphone : 13666666666,
	      createAt: "2023-06-23T07:40:02.000Z"
          departmentId: 4745
          enable: 1
          id: 177044190
          name: "lebron"
          realname: "lebron111"
          roleId: 1
          updateAt: "2023-06-23T07:45:09.000Z"
		},
		{
		  cellphone : 13666666666,
	      createAt: "2023-06-23T07:40:02.000Z"
          departmentId: 4745
          enable: 1
          id: 177044191
          name: "lebron"
          realname: "lebron111"
          roleId: 1
          updateAt: "2023-06-23T07:45:09.000Z"
		}
]
    //表头
    const propList = [
      { prop: 'name', label: '用户名', minWidth: '100' },
      { prop: 'realname', label: '真实姓名', minWidth: '100' },
      { prop: 'cellphone', label: '手机号码', minWidth: '120' },
      { prop: 'enable', label: '状态', minWidth: '100', slotName: 'status' },
      { prop: 'createAt', label: '创建时间', minWidth: '250', slotName: 'createAt' },
      { prop: 'updateAt', label: '更新时间', minWidth: '250', slotName: 'updateAt' }
    ]
    return { searchFormConfig, userList, propList }
  }
})
</script>

<style scoped>
</style>

新建table.vue子组件

<template>
  <div class="hy-table">
    <!-- listData 内容 -->
    <el-table :data="listData" border style="width: 100%">
      <!-- 头部 -->
      <template v-for="propItem in propList" :key="propItem.prop">
        <el-table-column v-bind="propItem" align="center">
          <template #default="scope">
            <slot :name="propItem.slotName" :row="scope.row">
              {{ scope.row[propItem.prop] }}
            </slot>
          </template>
        </el-table-column>
      </template>
    </el-table>
  </div>
</template>

<script lang="ts">
import { defineComponent, PropType } from 'vue' 
//import { tableForm } from '../types'

export default defineComponent({
  props: {
    listData: {
      type: Array,
      require: true
    },
    propList: {
      //   type: Array as PropType<tableForm[]>//但是不确定其他组件调用传输的参数  所以不这么写
      type: Array,
      require: true
    },
    data: {}
  },
  setup() {
    return {}
  }
})
</script>

<style scoped>
</style>