Vue3-Element表格组件（el-table）的简单封装

封装的表格-myTable.vue

 

<template>
    <div>
        <el-table :data="dataSource" style="width: 100%">
            <template v-for="(column, ind, key) in columns" :key="column">
                <el-table-column v-if="column.scopeVal" :prop="column.prop" :label="column.label">
                    <template #default="scope">
                        <slot 
                        :column="column" 
                        :record="scope.row" 
                        :text="scope.row[column.prop]" 
                        :index="dataSource.indexOf(scope.row)"
                        :name="column.prop">
                        </slot>
                    </template>
                </el-table-column>
                <el-table-column v-else :prop="column.prop" :label="column.label" />
            </template>
        </el-table>
    </div>
</template>

<script>
import reactive from 'vue'


export default {
    props: {
        dataSource: Array,
        columns: Array,
    }
}
</script>

父组件调用.vue

<template>
  <el-card>
    <my-table :columns="columns" :dataSource="dataSource">
      <template #method="{ index }">
        <my-select :options="method_options" v-model="dataSource[index].method" placeholder="待选择"></my-select>
      </template>
      <template #value="{ index }">
        <el-input v-model="dataSource[index].value" placeholder="待填写"></el-input>
      </template>
      <template #text="{ index }">
        <el-input v-model="dataSource[index].text" placeholder="待填写"></el-input>
      </template>
      <template #notes="{ column, record, text, index }">
        <el-input v-model="dataSource[index].notes" placeholder="待填写"></el-input>
      </template>

      <template #action="{ index }" class="action">
        <el-link><el-icon><CirclePlusFilled /></el-icon></el-link>
        <el-link><el-icon><RemoveFilled /></el-icon></el-link>
        <el-link><el-icon><ArrowUpBold /></el-icon></el-link>
        <el-link><el-icon><ArrowDownBold /></el-icon></el-link>
      </template>
    </my-table>
  </el-card>
</template>
  
<script setup>
import { reactive, ref } from "vue"
import myTable from "../../components/table/myTable.vue";
import mySelect from "../../components/select/myselect.vue"


components: { myTable, mySelect }

const method_options = [
  {
    label: '访问',
    value: '访问'
  },
  {
    label: '点击',
    value: '点击'
  },
  {
    label: '输入',
    value: '输入'
  },
  {
    label: '断言',
    value: '断言'
  },
]

const columns = reactive([
  {
    label: '方法',
    prop: 'method',
    scopeVal: true,
  },
  {
    label: '元素定位',
    prop: 'value',
    scopeVal: true,
  },
  {
    label: '输入',
    prop: 'text',
    scopeVal: true,
  },
  {
    label: '备注',
    prop: 'notes',
    scopeVal: true,
  },
  {
    label: '状态',
    prop: 'status',
  },
  {
    label: '操作',
    prop: 'action',
    scopeVal: true,
  },
])

let dataSource = reactive([
  {
    method: '访问',
    value: '',
    text: 'http://www.baidu.com',
    notes: '访问百度',
    status: '待运行',
  },
  {
    method: '点击',
    value: '//*[@id=kw]',
    text: '',
    notes: '点击搜索框',
    status: '待运行',
  },
])

说明

通过作用域插槽传递以下4个参数供使用

        column：表头

        record：当前行数据

        text：当前单元格数据

        index：当前行索引

若要自定义某一列的元素，在column中的对应列名下加上scopeVal: true

效果

最近在慢慢转vue3，过程中还是用vue2的写法和思维去写，虽说vue3兼容vue2，但有些地方还是有点区别，在作用域插槽上也花了点时间。。。