table UI secondary packaging

Complete project interface

Component tree structure

1. 1.父组件 House
2. 子组件
3. 1.form表单组件 2.table数据组件

Development requires sass

1. <style scoped lang="scss">

1. cnpm i --save-dev sass

<style scoped lang="scss">
.house {
height: 100%;
background-color: #ccc;
padding: 10px;
.house-form {
min-height: 80px;
background-color: #fff;
}
}
</style>
//默认解析之后 空格选择

.house {
height: 100%;
background-color: #ccc;
padding: 10px;
> .house-form {
min-height: 80px;
background-color: #fff;
}
}
//添加> 解析之后是 > 子集选择器

Encapsulates form basic components

<script lang="ts" setup>
//引入puls 图标
import { Search, Refresh } from "@element-plus/icons-vue";
import { reactive } from "vue";

//定义props
interface propType {
options: any[];
}
const props = defineProps<propType>();
//定义emit事件
const emitter = defineEmits(["search"]);
const formInline = reactive({
name: "",
state: "",
});

//表单提交方法
const onSubmit = () => {
console.log("submit!");
//触发组件自定义事件
emitter("search", formInline);
};
</script>
<template>
<el-form :inline="true" :model="formInline" class="demo-form-inline">
<el-form-item label="编号">
<el-input v-model="formInline.name" placeholder="格式：商业区--商铺编号" />
</el-form-item>
<el-form-item label="使用状态">
<el-select v-model="formInline.state" placeholder="请选择">
<!-- 循环编译产生 -->
<template v-for="(item, index) in options">
<el-option :label="item.name" :value="item.value" />
</template>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit" :icon="Search">查询</el-button>
<el-button type="default" :icon="Refresh">重置</el-button>
</el-form-item>
</el-form>
</template>

<style scoped></style>

Improve the form table

常规版 table组件使用
<el-table :data="tableData" style="width: 100%">
<el-table-column type="index" prop="index" label="序号" width="150" />
<el-table-column prop="block" label="商业区-商户编号">
<template #default="scope"> {
   
   { scope.row.block }}-{
   
   { scope.row.code }} </template>
</el-table-column>
<el-table-column prop="floor" label="楼层" />
<el-table-column prop="buildingsquare" label="占地面积" />
<el-table-column prop="usesquare" label="使用面积" />
<el-table-column prop="rentFee" label="租金" />
<el-table-column prop="state" label="使用状态">
<!-- 使用插槽 -->
<template #default="scope">
<span>{
   
   {
scope.row.state == "empty"
? "空置"
: scope.row.state == "rented"
? "已出租"
: "已出售"
}}</span>
</template>
</el-table-column>
<el-table-column fixed="right" label="操作">
<template #default>
<el-button link type="primary" size="small" @click="handleClick">
<el-text class="mx-1" type="success">编辑</el-text>
</el-button>
<el-button link type="primary" size="small">
<el-text class="mx-1" type="danger">删除</el-text>
</el-button>
</template>
</el-table-column>
</el-table>

The table component encapsulates common components

1. 技术点： props 自定义事件 插槽

1. table中存在表格数据不同---1.纯数据展示 2.数据中带标签操作。

1. 思想：在table组件中使用循环遍历产生列字段
2. 需要额外 配置列的字段。

1.定义table 列配置
//table显示列配置
let tableColumn = ref([
{
prop: "block",
label: "商业区-商铺编号",
},
]);

2.在封装组件中 定义props接收列的配置
//定义props
interface propType {
tableData?: any[];
column?: any[];
}
const props = defineProps<propType>();

3.在table组件中动态编译产生
<el-table :data="tableData" style="width: 100%">
<!-- 循环编译产生 -->
<template v-for="(item, index) in column">
<el-table-column :prop="item.prop" :label="item.label" />
</template>
</el-table>

Display of results

4.完善列的配置
let tableColumn = ref([
{
prop: "block",
label: "商业区-商铺编号",
},
{
prop: "floor",
label: "楼层",
},
{
prop: "buildingsquare",
label: "占地面积",
},
{
prop: "usesquare",
label: "使用面积",
},
{
prop: "rentFee",
label: "租金",
},
{
prop: "state",
label: "使用状态",
},
{
prop: "caozuo",
label: "操作",
},
]);

5.配置插槽

列的配置添加 插槽
{
prop: "block",
label: "商业区-商铺编号",
slot: true,
},

<template v-if="item.slot">
<el-table-column :prop="item.prop" :label="item.label">
<template #default>
<!-- 配置定义插槽 -->
<slot></slot>
</template>
</el-table-column>
</template>

Components use write slots

<myTable :tableData="tableList" :column="tableColumn">
<template #default>
<span>测试</span>
</template>
</myTable>

The data field in the table table uses more than one slot, and the slot is changed to a named slot

<template v-if="item.slot">
<el-table-column :prop="item.prop" :label="item.label">
<template #default>
<!-- 配置定义插槽 -->
<slot name="xx"></slot>
</template>
</el-table-column>
使用修改为具名插槽使用
<myTable :tableData="tableList" :column="tableColumn">
<template #xx>
<span>测试</span>
</template>
</myTable>

Changed to dynamically named slots

<template v-if="item.slot">
<el-table-column :prop="item.prop" :label="item.label">
<template #default>
<!-- 配置定义插槽 -->
<slot :name="item.prop"></slot>
</template>
</el-table-column>
</template>
//根据列字段直接使用
<myTable :tableData="tableList" :column="tableColumn">
<template #blockCode>
<span>测试</span>
</template>
</myTable>

In order to use the table row data in the slot, it is necessary to use a local scope slot to expose the internal data of the component to the outside

<el-table-column :prop="item.prop" :label="item.label">
<template #default="scope">
<!-- 配置定义插槽 -->
<slot :name="item.prop" :items="scope"></slot>
</template>
</el-table-column>
插槽itmes 属性绑定到插槽 关联行数据 scope
在插槽中获取行数据
<myTable :tableData="tableList" :column="tableColumn">
<template #blockCode="{ items }">
<span>{
   
   { items.row.code }}</span>
</template>
</myTable>

achieve effect

Finally implement all slots

<myTable :tableData="tableList" :column="tableColumn">
<template #blockCode="{ items }">
{
   
   { items.row.block }}-{
   
   { items.row.code }}
</template>
<template #state="{ items }">
<el-text class="mx-1" type="success">{
   
   {
items.row.state == "empty"
? "空置"
: items.row.state == "rented"
? "已出租"
: "已出售"
}}</el-text>
</template>
<template #caozuo="{ items }">
<el-button link type="primary">编辑</el-button>
<el-button link type="danger">删除</el-button>
</template>
</myTable>

Modal box in the project

基本用法
<el-dialog v-model="dialogVisible" title="Tips" width="30%">
<span>This is a message</span>
<template #footer>
<span class="dialog-footer">
<el-button @click="dialogVisible = false">Cancel</el-button>
<el-button type="primary" @click="dialogVisible = false"> Confirm </el-button>
</span>
</template>
</el-dialog>

It should be because the content of the modal box in the project is uncertain, and the modal box needs to be repackaged.

二次封装使用插槽做的模态框
<script lang="ts" setup>
import { toRefs } from "vue";
//定义
interface propType {
dialogVisible: boolean;
}
let props = defineProps<propType>();
let { dialogVisible } = toRefs(props);
</script>
<template>
<el-dialog v-model="dialogVisible" title="Tips" width="30%">
<slot></slot>
<template #footer>
<slot name="footer"></slot>
</template>
</el-dialog>
</template>
<style scoped></style>

Use the modal box directly in the component

<!-- 模态框 -->
<myDialog :dialog-visible="dialogVisible">
<!-- 默认插槽 -->
<button>按钮</button>
<!-- 底部插槽 -->
<template #footer>
<span class="dialog-footer">
<el-button @click="confirm">Cancel</el-button>
<el-button type="primary" @click="confirm"> Confirm </el-button>
</span>
</template>
</myDialog>

form form package

复制出一个简单的基本格式
<script setup lang="ts"></script>
<template>
<el-form :inline="true" class="demo-form-inline">
<el-form-item label="Approved by">
<el-input v-model="formInline.user" placeholder="Approved by" />
</el-form-item>
</el-form>
</template>

封装不同种类的表单
分析表单的配置
{
name:"input",
type:"text"
}

Copyright © Chengdu Cochlear