sequence

I recently finished learning the new syntax of Vue3 and tried to do a little demo with Vue3+Element Plus

start

Create a new Vue3+TS project and install Element Plus

Introduce Element Plus in main.ts

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

app.use(ElementPlus)
Copy the code

Create a new simple-table.vue folder in the Components folder

The header is passed in from the outer slot, and the buttons display edit and delete by default

The following code

<template>
  <div class="table-content">
    <h1>table</h1>
    <el-table :data="tableData" border fix style="width: 80%" size='small'>
      <! - alternative - >
      <el-table-column v-if="selectionIsNeed" type="selection"  width="55"> </el-table-column>
      <! -- -- -- > meter
      <el-table-column v-for="column in columns" :key="column.prop" fixed
        :prop="column.prop" 
        :label="column.label" 
        :min-width="column.minWidth"
        >
      </el-table-column>
      <! -- -- -- > operation
      <el-table-column v-if="optionIsNeed" fixed="right" label="Operation" :width="optionWidth">
        <template #default="scope">
          <slot name="prev" :scope='scope'></slot>
          <el-button v-if="editIsNeed" @click="handleEdit(scope.$index, scope.row)" type="text" size="small">The editor</el-button>
          <el-button v-if="deleteIsNeed" @click="handleDelete(scope.$index, scope.row)" type="text" size="small">delete</el-button>
          <slot name="next" :scope='scope'></slot>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  name: 'SimpleTable'.props: {
    columns: {
      type: Array
    },
    selectionIsNeed: {
      type: Boolean.default: false
    },
    optionIsNeed: {
      type: Boolean.default: true
    },
    editIsNeed: {
      type: Boolean.default: true
    },
    deleteIsNeed: {
      type: Boolean.default: true
    },
    optionWidth: {
      type: String.default: '120'
    },
    tableData: {
      type: Array.default: () = > []
    }
  },
  setup (props, {emit}) {
    const handleEdit = (index: number, row: any[]) = > {
      emit('handleEdit', { index: index, row: row })
    }
    const handleDelete =  (index: number, row: any[]) = > {
      emit('handleDelete', { index: index, row: row })
    }
    return {
      handleEdit,
      handleDelete
    }
  },
})
</script>

<style lang="less" scoped>

</style>

Copy the code

Import directly from app.vue

The following code

<template>
  <div id="nav">
    <simple-table
      :columns="columns"
      :tableData="tableData"
      optionWidth="200"
      @handleEdit="handleEdit"
      @handleDelete="handleDelete"
    >
      <template #prev="scope">
        <el-button type="text" size="small" @click="handleFly(scope)"
          >See < / el - button ></template>
      <template #next="scope">
        <el-button type="text" size="small" @click="handleFly(scope)"
          >Take-off < / el - button ></template>
    </simple-table>
  </div>
</template>

<script lang="ts">
import SimpleTable from '@/components/simple-table.vue'
import { defineComponent, reactive } from 'vue'

export default defineComponent({
  components: {
    SimpleTable
  },
  setup() {
    const columns = reactive([
      { prop: "name".label: "Name".minWidth: 120 },
      { prop: "sex".label: "Gender".minWidth: 120 },
      { prop: "date".label: "Date".minWidth: 120},]);const tableData = reactive([
      { name: "Andy Lau".sex: "Male".date: "2021-09-01"},]);const handleFly = (scope: any) = > {
      console.log(scope);
    };
    const handleEdit = (params: any) = > {
      console.log(params);
    };
    const handleDelete = (params: any) = > {
      console.log(params.row.name);
    };
    return{ tableData, columns, handleFly, handleEdit, handleDelete, }; }})</script>


<style lang="less">
</style>
Copy the code

The effect is shown in figure

The topic outside

Vue components under external calls to components need to be introduced in sequence;

My idea is that components inside the Components folder can be global components that can be called directly;

So in the Components folder, create index.ts

Type the following

Note that the component must return a name value as the call name of the component

import type { App } from 'vue'

const components:__WebpackModuleApi.RequireContext = require.context(
  '@/components'.true./\.vue$/
)

const autoRegist = {
  install(app: App) {
    components.keys().forEach((path) = > {
      const file = components(path).default
      const fileName = file.name
      app.component(fileName, file || components(path))
    })
  }
}

export default autoRegist
Copy the code

Then import it into main.ts

Globally import vUE components inside the Components folder as plug-ins

import autoRegist from './components'

app.use(autoRegist)
Copy the code

After the