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

陈林___

已于 2023-07-20 15:01:20 修改

阅读量1.5k

点赞数

文章标签： vue.js elementui javascript

于 2023-07-19 16:35:31 首次发布

本文链接：https://blog.csdn.net/m0_54731428/article/details/131812075

版权

文章展示了如何在Vue3中封装一个自定义表格组件(myTable.vue)，利用作用域插槽实现列的自定义渲染，如方法选择(my-select)、文本输入等。同时，文章提及了从Vue2向Vue3过渡时需要注意的思维和写法差异，以及作用域插槽的使用技巧。

摘要由CSDN通过智能技术生成

封装的表格-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: '待运行',
  },
])