1.1.3 • Published 2 years ago
tf-low-code v1.1.3
版本内容
使用 element-ui 2.15.6 以上版本
使用 vue2.5.11 以上版本
node 版本 14 以上
使用方法
安装
npm install tf-low-code -S快速运行
import Vue from "vue";
import Element from "element-ui";
import tfLowCode from "tf-low-code";
Vue.use(Element);
Vue.use(tfLowCode);表格使用
<template>
<div id="app">
<LTable
ref="tableRef"
:data="listData"
:columns="columns"
:operates="operates"
:options="options"
@handleSelectionChange="handleSelectionChange"
@confirmEdit="confirmEdit"
@sizeChange="sizeChange"
@currentChange="currentChange"
@prevClick="prevClick"
@nextClick="nextClick"
>
<!-- <template v-slot:culumnsheader>
<div>这是自定义叫culumnsheader的表头</div>
</template>
<template v-slot:culumnRender>
<div>这是自定义叫culumnRender的列</div>
</template> -->
<template v-slot:emptySlot>
<div>这是在options中配置的空内容，在没数据的时候显示</div>
</template>
<template v-slot:expendRowRender="record">
<el-form label-position="left" class="demo-table-expand">
<el-form-item label="名称">
<span>{{ record.row.name }}</span>
</el-form-item>
<el-form-item label="日期">
<span>{{ record.row.date }}</span>
</el-form-item>
<el-form-item label="地址">
<span>{{ record.row.address }}</span>
</el-form-item>
</el-form>
</template>
</LTable>
</div>
</template>
<script>
export default {
name: "App",
data() {
let self = this;
return {
listData: [
{
date: "2016-05-02",
name: "王小虎",
address: "上海市普陀区金沙江路 1518 弄",
},
{
date: "2016-05-04",
name: "王小虎",
address: "上海市普陀区金沙江路 1517 弄",
},
{
date: "2016-05-01",
name: "王小虎",
address: "上海市普陀区金沙江路 1519 弄",
},
{
date: "2016-05-03",
name: "王小虎",
address: "上海市普陀区金沙江路 1516 弄",
},
],
options: {
stripe: false, // 是否为斑马纹 table
loading: false, // 是否添加表格loading加载动画
highlightCurrentRow: false, // 是否支持当前行高亮显示
mutiSelect: false, // 是否支持列表项选中功能
border: false, // 是否显示表格竖线
expendRowRender: true, // 是否展开行
maxHeight: 500, //最大高度
emptySlot: "emptySlot",
// rowKey树状结构
pagination: {
align:"center",//分页对齐方式
//表格分页配置
layout: "prev, pager, next",
title: 50,
background: true,
small: false,
pageSize: 10,
pageCount: 10,
currentPage: 1,
pageSizes: [10, 20, 30, 40],
disabled: false,
},
},
operates: {
width: "auto", //宽度
fixed: false, //是否固定
label: "操作区", //名称
list: [
//可配置多个按钮
{
show: true,
inlineEdit: false, //是否行内编辑
label: "编辑", //按钮名称
type: "primary", //按钮状态
disabled: false, //是否可编辑
plain: false, //是否朴素按钮
method(key, value) {
self.getInfo(key, value);
},
},
],
},
columns: [
{
prop: "date", //属性名
label: "日期", //名称
show: true, //是否展示
align: "center", //对齐方式，默认center
width: "300px", //宽度
sortable: false, //是否可排序，默认false
//filters数据过滤的选项
//filter-method(){}数据过滤使用的方法
//fixed列固定属性
/* scopedSlots: {
customHeader: "culumnsheader", //自定义表头的插槽名
customRender: "culumnRender", //自定义列的插槽名优先级高于render
}, */
/* render: function (value, value2) {
//重新自定义表格内的数据属性
value2.row.date = "1";
return;
}, */
},
{
prop: "name",
label: "姓名",
},
{
prop: "address",
label: "地址",
},
],
};
},
methods: {
getInfo(key, value) {
//点击编辑的函数，在operates中设置
console.log(key, value);
},
sizeChange(e) {
//分页页码大小变动时候触发的事件
console.log(e);
},
currentChange(e) {
//分页当前页变动时候触发的事件
console.log(e);
},
prevClick(e) {
//分页中用户点击上一页按钮改变当前页后触发
console.log(e);
},
nextClick(e) {
//分页中用户点击下一页按钮改变当前页后触发
console.log(e);
},
handleSelectionChange(e) {
console.log(e);
//多行选中回调
},
confirmEdit(e) {
//保存编辑的回调 e.row为保存的当前数据
console.log(e.row);
},
},
};
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>表单使用
<template>
<div id="app">
<LForm :form="form" :formItems="formItems" :options="options">
<template v-slot:slotF>
<div>这是自定义插槽</div>
</template>
<template v-slot:footButton>
<el-button>创建</el-button>
</template>
</LForm>
</div>
</template>
<script>
export default {
name: "App",
data() {
let self = this;
return {
form: {
name: "",
region: "",
delivery: false,
type: ["lx"],
resource: "lx",
desc: "",
},
options: {
//和element-ui上的属性基本保持一致
inline: false,
labelPosition: "right",
labelWidth: "80px",
labelSuffix: ":",
hideRequiredAsterisk: false,
showMessage: true,
inlineMessage: false,
statusIcon: false,
validateOnRuleChange: true,
size: "small",
disabled: false,
//button: "footButton", //自定义按钮名
emptySlot: "slotF", //自定义插槽名
emptySlotShow: false, //是否只显示自定义插槽
method(value) {
//默认立即创建按钮的回调
self.createButton(value);
},
},
formItems: [
{
label: "活动名称",
prop: "name",
placeholder: "请输入活动名称",
},
{
label: "活动区域",
prop: "region",
type: "select",
placeholder: "请输入活动区域",
data: [
{
label: "区域一",
value: "shanghai",
},
{
label: "区域二",
value: "beijing",
},
], //select的时候需要输入data
},
{
label: "即时配送",
prop: "delivery",
type: "switch",
},
{
label: "活动性质",
prop: "type",
type: "checkboxGroup",
data: [
{
label: "hahhaha",
type: "type",
},
{
label: "1122212",
type: "type",
},
], //checkboxGroup的时候需要输入data
},
{
label: "特殊资源",
prop: "resource",
type: "radioGroup",
data: [
{
label: "lx",
},
{
label: "lx2",
},
], //radioGroup的时候需要输入data
},
{
label: "活动形式",
prop: "desc",
type: "textarea",
},
],
};
},
methods: {
createButton(value) {
console.log(value);
},
},
};
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>