table UI 二次封装

完成项目界面

组件树结构

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

开发需要使用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;
}
}
//添加> 解析之后是 > 子集选择器

封装了form基础组件

<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>

完善表格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>

table组件封装公共组件

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>

展示效果

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>

组件使用写入插槽

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

table表格中的数据字段使用插槽不止一个，插槽修改为具名插槽

<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>

修改为动态具名插槽

<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>

为了达到在插槽中使用table表格行数据 需要使用局部作用域插槽，将组件内部数据对外暴漏

<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>

实现效果

最终实现所有的插槽

<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>

项目中模态框

基本用法
<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>

应为项目中模态框的内容不定，需要将模态框进行二次封装。

二次封装使用插槽做的模态框
<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>

组件中直接使用模态框

<!-- 模态框 -->
<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表单封装

复制出一个简单的基本格式
<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"
}

版权所有 © 成都蜗