feat(advanced): 优化高级表格组件功能并添加演示页面
- 将 CuteDragTable 和 CuteSimpleTable 的 pageProps 设置为非必填 - 移除 onPageChange 中的 console.log 调试代码并规范化事件发射 - 规范化 order-change 事件的参数传递格式 - 为 CuteEditTable 的输入组件添加宽度样式以改善显示效果 - 在 CuteEditTable 中添加 resetField 方法用于表单重置联动 - 在 CuteRichTextEditor 中添加 resetField 方法的 input 事件发射 - 新增 CuteDragTableDemo、CuteEditTableDemo 和 CuteSimpleTableDemo 演示页面 - 在组件演示主页中添加高级组件的折叠面板展示
This commit is contained in:
@@ -1,126 +0,0 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<!-- 工具栏 -->
|
||||
<div class="head-container">
|
||||
<el-form
|
||||
ref="searchForm"
|
||||
:inline="true"
|
||||
:model="form.model"
|
||||
label-position="right"
|
||||
label-width="80px"
|
||||
:rules="form.rules"
|
||||
size="mini"
|
||||
>
|
||||
<el-form-item label="模糊查询" prop="blurry">
|
||||
<el-input v-model="form.model.blurry" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="onFormSubmit('searchForm')">查询</el-button>
|
||||
<el-button @click="onFormReset('searchForm')">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<!-- 表格渲染 -->
|
||||
<!-- fetch: 获取远程数据 -->
|
||||
<!-- params-transform: 组装查询参数 -->
|
||||
<!-- responseTransform: 组装表格对象。对响应结果做处理 -->
|
||||
<!-- primary-key: 主键 -->
|
||||
<!-- showSelect: 是否多选。不传默认false，传true为多选 -->
|
||||
<!-- @selection-change: 当且仅当mode为multi时启用 -->
|
||||
<!-- @order-change: 当排序字段被单击，el-table-column 需添加 sortable="custom" 属性 -->
|
||||
<cute-drag-table
|
||||
ref="instance"
|
||||
:fetch="curd.fetch"
|
||||
:params-transform="curd.paramsTransform"
|
||||
primary-key="id"
|
||||
:page-props="curd.pageProps"
|
||||
>
|
||||
<el-table-column prop="name" label="名称" />
|
||||
<el-table-column prop="description" label="描述" />
|
||||
<el-table-column prop="createTime" label="创建时间" :formatter="FormatRowDateTimeStr" />
|
||||
<el-table-column prop="createBy" label="创建人" />
|
||||
<el-table-column label="操作" width="150" min-width="150" fixed="right">
|
||||
<template slot-scope="scope">
|
||||
<div>
|
||||
<el-button type="text" @click="onTableEditClick(scope.row)">编辑</el-button>
|
||||
<el-button type="text" @click="onTableDeleteClick(scope.row)">删除</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</cute-drag-table>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import DictService from '@/api/system/dict'
|
||||
import CuteDragTable from '@/views/components/advanced/CuteDragTable.vue'
|
||||
import { FormatRowDateTimeStr } from '@/utils/KitUtil'
|
||||
|
||||
export default {
|
||||
name: 'CuteDragTableDemo',
|
||||
components: { CuteDragTable },
|
||||
data() {
|
||||
return {
|
||||
form: {
|
||||
model: {
|
||||
blurry: ''
|
||||
},
|
||||
rules: {}
|
||||
},
|
||||
curd: {
|
||||
paramsTransform: (pageProps) => {
|
||||
const values = this.form.model
|
||||
return {
|
||||
page: pageProps.current,
|
||||
size: pageProps.pageSize,
|
||||
args: {
|
||||
...values
|
||||
}
|
||||
}
|
||||
},
|
||||
fetch: async(queryParams) => {
|
||||
return DictService.searchDict(queryParams)
|
||||
},
|
||||
pageProps: {
|
||||
current: 1,
|
||||
pageSize: 10,
|
||||
total: 0
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.initData()
|
||||
},
|
||||
methods: {
|
||||
FormatRowDateTimeStr,
|
||||
initData() {
|
||||
this.$refs.instance.refresh()
|
||||
},
|
||||
onFormSubmit(formName) {
|
||||
const that = this
|
||||
that.$refs[formName].validate((valid) => {
|
||||
if (valid) {
|
||||
that.$refs.instance.refresh()
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
})
|
||||
},
|
||||
onFormReset(formName) {
|
||||
try {
|
||||
this.$refs[formName].resetFields()
|
||||
} catch (e) {
|
||||
console.error(e)
|
||||
}
|
||||
},
|
||||
onTableEditClick(row) {
|
||||
console.log('编辑', row)
|
||||
},
|
||||
onTableDeleteClick(row) {
|
||||
console.log('删除', row)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -25,41 +25,6 @@
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<!-- 表格渲染 -->
|
||||
<!-- fetch: 获取远程数据 -->
|
||||
<!-- params-transform: 组装查询参数 -->
|
||||
<!-- responseTransform: 组装表格对象。对响应结果做处理 -->
|
||||
<!-- primary-key: 主键 -->
|
||||
<!-- showSelect: 是否多选。不传默认false，传true为多选 -->
|
||||
<!-- @selection-change: 当且仅当mode为multi时启用 -->
|
||||
<!-- @order-change: 当排序字段被单击，el-table-column 需添加 sortable="custom" 属性 -->
|
||||
<cute-simple-table
|
||||
ref="instance"
|
||||
:fetch="curd.fetch"
|
||||
:params-transform="curd.paramsTransform"
|
||||
primary-key="id"
|
||||
:page-props="curd.pageProps"
|
||||
show-select
|
||||
>
|
||||
<template v-slot:batchArea>
|
||||
<cute-button type="primary">批量绑定</cute-button>
|
||||
</template>
|
||||
<template v-slot:toolArea>
|
||||
<cute-button type="primary">导出</cute-button>
|
||||
</template>
|
||||
<el-table-column prop="name" label="名称" />
|
||||
<el-table-column prop="description" label="描述" />
|
||||
<el-table-column prop="createTime" label="创建时间" sortable="custom" :formatter="FormatRowDateTimeStr" />
|
||||
<el-table-column prop="createBy" label="创建人" />
|
||||
<el-table-column label="操作" width="150" min-width="150" fixed="right">
|
||||
<template slot-scope="scope">
|
||||
<div>
|
||||
<el-button type="text" @click="onTableEditClick(scope.row)">编辑</el-button>
|
||||
<el-button type="text" @click="onTableDeleteClick(scope.row)">删除</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</cute-simple-table>
|
||||
<cute-form-dialog
|
||||
ref="dialogForm"
|
||||
:model="createFormModel"
|
||||
@@ -115,19 +80,16 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import CuteSimpleTable from '@/views/components/advanced/CuteSimpleTable.vue'
|
||||
import DictService from '@/api/system/dict'
|
||||
import CuteFormDialog from '@/views/components/advanced/CuteFormDialog.vue'
|
||||
import CuteFormDrawer from '@/views/components/advanced/CuteFormDrawer.vue'
|
||||
import { FormatRowDateTimeStr } from '@/utils/KitUtil'
|
||||
import CuteButton from '@/views/components/dev/CuteButton.vue'
|
||||
import CuteTransfer from '@/views/components/dev/CuteTransfer.vue'
|
||||
import CuteEditTable from '@/views/components/advanced/CuteEditTable.vue'
|
||||
import CuteFormDialogPro from '@/views/components/advanced/CuteFormDialogPro.vue'
|
||||
|
||||
export default {
|
||||
name: 'CuteSimpleTableDemo',
|
||||
components: { CuteFormProDialog: CuteFormDialogPro, CuteEditTable, CuteTransfer, CuteButton, CuteFormDrawer, CuteFormDialog, CuteSimpleTable },
|
||||
components: { CuteFormProDialog: CuteFormDialogPro, CuteEditTable: CuteEditTable, CuteTransfer, CuteFormDrawer, CuteFormDialog },
|
||||
data() {
|
||||
return {
|
||||
modeDataSource: [
|
||||
@@ -157,48 +119,6 @@ export default {
|
||||
},
|
||||
rules: {}
|
||||
},
|
||||
curd: {
|
||||
paramsTransform: (pageProps) => {
|
||||
const values = this.form.model
|
||||
return {
|
||||
page: pageProps.current,
|
||||
size: pageProps.pageSize,
|
||||
args: {
|
||||
...values
|
||||
}
|
||||
}
|
||||
},
|
||||
fetch: async(queryParams) => {
|
||||
return DictService.searchDict(queryParams)
|
||||
},
|
||||
columns: [
|
||||
{ prop: 'name', label: '名称' },
|
||||
{ prop: 'description', label: '描述' },
|
||||
{ prop: 'createTime', label: '创建时间', formatter: FormatRowDateTimeStr },
|
||||
{ prop: 'createBy', label: '创建人' }
|
||||
],
|
||||
operateColumn: {
|
||||
width: '150',
|
||||
fixed: 'right',
|
||||
formatter: (row, column, cellValue, index) => {
|
||||
return (<div>
|
||||
<el-button type='text' onClick={() => {
|
||||
console.log('编辑')
|
||||
}}>编辑
|
||||
</el-button>
|
||||
<el-button type='text' onClick={() => {
|
||||
console.log('删除')
|
||||
}}>删除
|
||||
</el-button>
|
||||
</div>)
|
||||
}
|
||||
},
|
||||
pageProps: {
|
||||
current: 1,
|
||||
pageSize: 10,
|
||||
total: 0
|
||||
}
|
||||
},
|
||||
// CuteFormDialog
|
||||
createFormModel: {
|
||||
name: '',
|
||||
@@ -228,7 +148,6 @@ export default {
|
||||
this.initData()
|
||||
},
|
||||
methods: {
|
||||
FormatRowDateTimeStr,
|
||||
initData() {
|
||||
this.$refs.instance.refresh()
|
||||
},
|
||||
@@ -263,12 +182,6 @@ export default {
|
||||
},
|
||||
onDrawerFormSubmit(values) {
|
||||
console.log('onDrawerFormSubmit', values)
|
||||
},
|
||||
onTableEditClick(row) {
|
||||
console.log('编辑', row)
|
||||
},
|
||||
onTableDeleteClick(row) {
|
||||
console.log('删除', row)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,154 @@
|
||||
<template>
|
||||
<div>
|
||||
<h4>何时使用</h4>
|
||||
<ul class="description">
|
||||
<li>展示结构化数据列表，并支持排序、分页、拖拽排序</li>
|
||||
<li>在使用过程中有任何问题，咨询 @Odboy（前端）</li>
|
||||
</ul>
|
||||
<h4>基础用法</h4>
|
||||
<!-- 表格渲染 -->
|
||||
<!-- fetch: 获取远程数据 -->
|
||||
<!-- params-transform: 组装查询参数 -->
|
||||
<!-- responseTransform: 组装表格对象。对响应结果做处理 -->
|
||||
<!-- primary-key: 主键 -->
|
||||
<!-- showSelect: 是否多选。不传默认false，传true为多选 -->
|
||||
<!-- @selection-change: 当且仅当mode为multi时启用 -->
|
||||
<!-- @order-change: 当排序字段被单击，el-table-column 需添加 sortable="custom" 属性 -->
|
||||
<cute-drag-table
|
||||
ref="instance"
|
||||
:fetch="curd.fetch"
|
||||
:params-transform="curd.paramsTransform"
|
||||
primary-key="id"
|
||||
:page-props="curd.pageProps"
|
||||
show-select
|
||||
>
|
||||
<template v-slot:batchArea>
|
||||
<cute-button type="primary">批量绑定</cute-button>
|
||||
</template>
|
||||
<template v-slot:toolArea>
|
||||
<cute-button type="primary">导出</cute-button>
|
||||
</template>
|
||||
<el-table-column prop="name" label="名称" />
|
||||
<el-table-column prop="description" label="描述" />
|
||||
<el-table-column prop="createTime" label="创建时间" sortable="custom" :formatter="FormatRowDateTimeStr" />
|
||||
<el-table-column prop="createBy" label="创建人" />
|
||||
<el-table-column label="操作" width="150" min-width="150" fixed="right">
|
||||
<template slot-scope="scope">
|
||||
<div>
|
||||
<el-button type="text" @click="onTableEditClick(scope.row)">编辑</el-button>
|
||||
<el-button type="text" @click="onTableDeleteClick(scope.row)">删除</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</cute-drag-table>
|
||||
<h4>API</h4>
|
||||
<el-table :data="apiData">
|
||||
<el-table-column prop="name" label="参数" width="220" />
|
||||
<el-table-column prop="remark" label="说明" width="450" />
|
||||
<el-table-column prop="type" label="类型" />
|
||||
<el-table-column prop="defaultValue" label="默认值" />
|
||||
<el-table-column prop="required" label="是否必填" />
|
||||
</el-table>
|
||||
<h4>方法</h4>
|
||||
<el-table :data="methodData">
|
||||
<el-table-column prop="name" label="函数" width="220" />
|
||||
<el-table-column prop="remark" label="说明" width="450" />
|
||||
<el-table-column prop="inputArgs" label="入参" />
|
||||
<el-table-column prop="outArgs" label="出参" />
|
||||
</el-table>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import DictService from '@/api/system/dict'
|
||||
import CuteButton from '@/views/components/dev/CuteButton.vue'
|
||||
import { FormatRowDateTimeStr } from '@/utils/KitUtil'
|
||||
import CuteDragTable from '@/views/components/advanced/CuteDragTable.vue'
|
||||
|
||||
export default {
|
||||
name: 'CuteDragTableDemo',
|
||||
components: { CuteDragTable, CuteButton },
|
||||
data() {
|
||||
return {
|
||||
curd: {
|
||||
paramsTransform: (pageProps) => {
|
||||
const values = this.form.model
|
||||
return {
|
||||
page: pageProps.current,
|
||||
size: pageProps.pageSize,
|
||||
args: {
|
||||
...values
|
||||
}
|
||||
}
|
||||
},
|
||||
fetch: async(queryParams) => {
|
||||
return DictService.searchDict(queryParams)
|
||||
},
|
||||
columns: [
|
||||
{ prop: 'name', label: '名称' },
|
||||
{ prop: 'description', label: '描述' },
|
||||
{ prop: 'createTime', label: '创建时间', formatter: FormatRowDateTimeStr },
|
||||
{ prop: 'createBy', label: '创建人' }
|
||||
],
|
||||
operateColumn: {
|
||||
width: '150',
|
||||
fixed: 'right',
|
||||
formatter: (row, column, cellValue, index) => {
|
||||
return (<div>
|
||||
<el-button type='text' onClick={() => {
|
||||
console.log('编辑')
|
||||
}}>编辑
|
||||
</el-button>
|
||||
<el-button type='text' onClick={() => {
|
||||
console.log('删除')
|
||||
}}>删除
|
||||
</el-button>
|
||||
</div>)
|
||||
}
|
||||
},
|
||||
pageProps: {
|
||||
current: 1,
|
||||
pageSize: 10,
|
||||
total: 0
|
||||
}
|
||||
},
|
||||
apiData: [
|
||||
{ name: 'primary-key', remark: '对象中的哪个字段设置为主键', type: 'string', defaultValue: 'id', required: '否' },
|
||||
{ name: 'fetch', remark: '请求数据的API接口', type: 'async(queryParams) => {}', defaultValue: '-', required: '否' },
|
||||
{ name: 'paramsTransform', remark: '组装请求参数的方法', type: '(pageProps) => {}', defaultValue: '-', required: '否' },
|
||||
{ name: 'responseTransform', remark: '组装响应结果的方法', type: '(response) => {}', defaultValue: '-', required: '否' },
|
||||
{ name: 'showSelect', remark: '是否支持多选', type: 'boolean', defaultValue: 'false', required: '否' },
|
||||
{ name: 'paging', remark: '是否显示分页组件', type: 'boolean', defaultValue: 'true', required: '否' },
|
||||
{ name: 'pageProps', remark: '分页参数', type: 'object', defaultValue: '{current: 1,pageSize: 10,total: 0}', required: '否' },
|
||||
{ name: 'customHeight', remark: '自定义高度', type: 'number', defaultValue: 'null', required: '否' },
|
||||
{ name: 'selection-change', remark: '选中列表项发生改变的时候触发的回调', type: '(array) => {}', defaultValue: '-', required: '否' },
|
||||
{ name: 'order-change', remark: '排序列发生改变的时候触发的回调。el-table-column 需添加 sortable="custom" 属性', type: '(column, orderType) => {}', defaultValue: '-', required: '否' },
|
||||
{ name: 'page-change', remark: '分页数据发生改变的时候触发的回调', type: '(currentPage, pageSize) => {}', defaultValue: '-', required: '否' }
|
||||
],
|
||||
methodData: [
|
||||
{ name: 'getDataSource', remark: '获取当前表格的数据', inputArgs: '-', outArgs: 'array' },
|
||||
{ name: 'refresh', remark: '刷新当前表格的数据，可以理解为重新执行查询方法。', inputArgs: '-', outArgs: '-' }
|
||||
]
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$refs.instance.refresh()
|
||||
},
|
||||
methods: {
|
||||
FormatRowDateTimeStr,
|
||||
onTableEditClick(row) {
|
||||
console.log('编辑', row)
|
||||
},
|
||||
onTableDeleteClick(row) {
|
||||
console.log('删除', row)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
ul {
|
||||
padding-left: 20px;
|
||||
}
|
||||
.description > li{
|
||||
font-size: 12px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,93 @@
|
||||
<template>
|
||||
<div>
|
||||
<h4>何时使用</h4>
|
||||
<ul class="description">
|
||||
<li>表单中出现可编辑列表时使用，目前限定在普通表格，不包含可编辑展开表格、可编辑树表等</li>
|
||||
<li>在使用过程中有任何问题，咨询 @Odboy（前端）</li>
|
||||
</ul>
|
||||
<h4>基础用法</h4>
|
||||
<cute-edit-table v-model="dataSource" primary-key="id" :schema="schema" />
|
||||
<h4>与CuteFormDrawer集成 <el-button type="text" @click="showFormDrawer">显示抽屉</el-button></h4>
|
||||
<cute-form-drawer ref="formDrawer" title="与CuteFormDrawer集成" :model="form">
|
||||
<el-form-item label="可编辑表格" prop="editValues" label-width="100px">
|
||||
<cute-edit-table v-model="form.editValues" primary-key="id" :schema="schema" />
|
||||
</el-form-item>
|
||||
</cute-form-drawer>
|
||||
<h4>API</h4>
|
||||
<el-table :data="apiData">
|
||||
<el-table-column prop="name" label="参数" width="220" />
|
||||
<el-table-column prop="remark" label="说明" width="450" />
|
||||
<el-table-column prop="type" label="类型" />
|
||||
<el-table-column prop="defaultValue" label="默认值" />
|
||||
<el-table-column prop="required" label="是否必填" />
|
||||
</el-table>
|
||||
<h4>Schema属性</h4>
|
||||
<el-table :data="schemaData">
|
||||
<el-table-column prop="name" label="属性名" width="220" />
|
||||
<el-table-column prop="remark" label="说明" width="450" />
|
||||
<el-table-column prop="type" label="类型" />
|
||||
<el-table-column prop="required" label="是否必填" />
|
||||
</el-table>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import CuteEditTable from '@/views/components/advanced/CuteEditTable.vue'
|
||||
import CuteFormDrawer from '@/views/components/advanced/CuteFormDrawer.vue'
|
||||
|
||||
export default {
|
||||
name: 'CuteEditTableDemo',
|
||||
components: { CuteFormDrawer, CuteEditTable },
|
||||
data() {
|
||||
return {
|
||||
schema: [
|
||||
{ name: 'name', title: '姓名', type: 'input' },
|
||||
{ name: 'sex', title: '性别', type: 'select', dataSource: [{ label: '男', value: 'nn' }, { label: '女', value: 'mm' }] },
|
||||
{ name: 'description', title: '描述', type: 'input' }
|
||||
],
|
||||
dataSource: [
|
||||
{ id: 1, name: '小明', sex: 'mm', description: '小明牛P' },
|
||||
{ id: 4, name: '小绿', sex: 'nn', description: '小绿牛P' },
|
||||
{ id: 5, name: '小黄', sex: 'nn', description: '小黄牛P' },
|
||||
{ id: 6, name: '小紫', sex: 'nn', description: '小紫牛P' },
|
||||
{ id: 17, name: '小郑', sex: 'mm', description: '小郑牛P' },
|
||||
{ id: 18, name: '小王', sex: 'nn', description: '小王牛P' }
|
||||
],
|
||||
form: {
|
||||
editValues: [
|
||||
{ id: 1, name: '小明', sex: 'mm', description: '小明牛P' },
|
||||
{ id: 4, name: '小绿', sex: 'nn', description: '小绿牛P' },
|
||||
{ id: 5, name: '小黄', sex: 'nn', description: '小黄牛P' },
|
||||
{ id: 6, name: '小紫', sex: 'nn', description: '小紫牛P' },
|
||||
{ id: 17, name: '小郑', sex: 'mm', description: '小郑牛P' },
|
||||
{ id: 18, name: '小王', sex: 'nn', description: '小王牛P' }
|
||||
]
|
||||
},
|
||||
apiData: [
|
||||
{ name: 'value', remark: '绑定的值', type: 'array', defaultValue: '-', required: '否' },
|
||||
{ name: 'primary-key', remark: '对象中的哪个字段设置为主键', type: 'string', defaultValue: 'id', required: '是' },
|
||||
{ name: 'height', remark: '表格高度', type: 'number', defaultValue: 'height', required: '否' },
|
||||
{ name: 'schema', remark: '表格定义', type: 'array', defaultValue: '[]', required: '是' }
|
||||
],
|
||||
schemaData: [
|
||||
{ name: 'name', remark: '表单项名称', type: 'string', defaultValue: '-', required: '是' },
|
||||
{ name: 'title', remark: '表单项标题', type: 'string', defaultValue: '-', required: '是' },
|
||||
{ name: 'type', remark: '表单项类型。input 输入框 | select 单选框', type: 'string', defaultValue: '-', required: '是' },
|
||||
{ name: 'dataSource', remark: '当type=select时必填', type: 'array', defaultValue: '[]', required: '否' }
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
showFormDrawer() {
|
||||
this.$refs.formDrawer.show()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
ul {
|
||||
padding-left: 20px;
|
||||
}
|
||||
.description > li{
|
||||
font-size: 12px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,154 @@
|
||||
<template>
|
||||
<div>
|
||||
<h4>何时使用</h4>
|
||||
<ul class="description">
|
||||
<li>展示结构化数据列表，并支持排序、分页</li>
|
||||
<li>在使用过程中有任何问题，咨询 @Odboy（前端）</li>
|
||||
</ul>
|
||||
<h4>基础用法</h4>
|
||||
<!-- 表格渲染 -->
|
||||
<!-- fetch: 获取远程数据 -->
|
||||
<!-- params-transform: 组装查询参数 -->
|
||||
<!-- responseTransform: 组装表格对象。对响应结果做处理 -->
|
||||
<!-- primary-key: 主键 -->
|
||||
<!-- showSelect: 是否多选。不传默认false，传true为多选 -->
|
||||
<!-- @selection-change: 当且仅当mode为multi时启用 -->
|
||||
<!-- @order-change: 当排序字段被单击，el-table-column 需添加 sortable="custom" 属性 -->
|
||||
<cute-simple-table
|
||||
ref="instance"
|
||||
:fetch="curd.fetch"
|
||||
:params-transform="curd.paramsTransform"
|
||||
primary-key="id"
|
||||
:page-props="curd.pageProps"
|
||||
show-select
|
||||
>
|
||||
<template v-slot:batchArea>
|
||||
<cute-button type="primary">批量绑定</cute-button>
|
||||
</template>
|
||||
<template v-slot:toolArea>
|
||||
<cute-button type="primary">导出</cute-button>
|
||||
</template>
|
||||
<el-table-column prop="name" label="名称" />
|
||||
<el-table-column prop="description" label="描述" />
|
||||
<el-table-column prop="createTime" label="创建时间" sortable="custom" :formatter="FormatRowDateTimeStr" />
|
||||
<el-table-column prop="createBy" label="创建人" />
|
||||
<el-table-column label="操作" width="150" min-width="150" fixed="right">
|
||||
<template slot-scope="scope">
|
||||
<div>
|
||||
<el-button type="text" @click="onTableEditClick(scope.row)">编辑</el-button>
|
||||
<el-button type="text" @click="onTableDeleteClick(scope.row)">删除</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</cute-simple-table>
|
||||
<h4>API</h4>
|
||||
<el-table :data="apiData">
|
||||
<el-table-column prop="name" label="参数" width="220" />
|
||||
<el-table-column prop="remark" label="说明" width="450" />
|
||||
<el-table-column prop="type" label="类型" />
|
||||
<el-table-column prop="defaultValue" label="默认值" />
|
||||
<el-table-column prop="required" label="是否必填" />
|
||||
</el-table>
|
||||
<h4>方法</h4>
|
||||
<el-table :data="methodData">
|
||||
<el-table-column prop="name" label="函数" width="220" />
|
||||
<el-table-column prop="remark" label="说明" width="450" />
|
||||
<el-table-column prop="inputArgs" label="入参" />
|
||||
<el-table-column prop="outArgs" label="出参" />
|
||||
</el-table>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import DictService from '@/api/system/dict'
|
||||
import CuteButton from '@/views/components/dev/CuteButton.vue'
|
||||
import CuteSimpleTable from '@/views/components/advanced/CuteSimpleTable.vue'
|
||||
import { FormatRowDateTimeStr } from '@/utils/KitUtil'
|
||||
|
||||
export default {
|
||||
name: 'CuteSimpleTableDemo',
|
||||
components: { CuteSimpleTable, CuteButton },
|
||||
data() {
|
||||
return {
|
||||
curd: {
|
||||
paramsTransform: (pageProps) => {
|
||||
const values = this.form.model
|
||||
return {
|
||||
page: pageProps.current,
|
||||
size: pageProps.pageSize,
|
||||
args: {
|
||||
...values
|
||||
}
|
||||
}
|
||||
},
|
||||
fetch: async(queryParams) => {
|
||||
return DictService.searchDict(queryParams)
|
||||
},
|
||||
columns: [
|
||||
{ prop: 'name', label: '名称' },
|
||||
{ prop: 'description', label: '描述' },
|
||||
{ prop: 'createTime', label: '创建时间', formatter: FormatRowDateTimeStr },
|
||||
{ prop: 'createBy', label: '创建人' }
|
||||
],
|
||||
operateColumn: {
|
||||
width: '150',
|
||||
fixed: 'right',
|
||||
formatter: (row, column, cellValue, index) => {
|
||||
return (<div>
|
||||
<el-button type='text' onClick={() => {
|
||||
console.log('编辑')
|
||||
}}>编辑
|
||||
</el-button>
|
||||
<el-button type='text' onClick={() => {
|
||||
console.log('删除')
|
||||
}}>删除
|
||||
</el-button>
|
||||
</div>)
|
||||
}
|
||||
},
|
||||
pageProps: {
|
||||
current: 1,
|
||||
pageSize: 10,
|
||||
total: 0
|
||||
}
|
||||
},
|
||||
apiData: [
|
||||
{ name: 'primary-key', remark: '对象中的哪个字段设置为主键', type: 'string', defaultValue: 'id', required: '否' },
|
||||
{ name: 'fetch', remark: '请求数据的API接口', type: 'async(queryParams) => {}', defaultValue: '-', required: '否' },
|
||||
{ name: 'paramsTransform', remark: '组装请求参数的方法', type: '(pageProps) => {}', defaultValue: '-', required: '否' },
|
||||
{ name: 'responseTransform', remark: '组装响应结果的方法', type: '(response) => {}', defaultValue: '-', required: '否' },
|
||||
{ name: 'showSelect', remark: '是否支持多选', type: 'boolean', defaultValue: 'false', required: '否' },
|
||||
{ name: 'paging', remark: '是否显示分页组件', type: 'boolean', defaultValue: 'true', required: '否' },
|
||||
{ name: 'pageProps', remark: '分页参数', type: 'object', defaultValue: '{current: 1,pageSize: 10,total: 0}', required: '否' },
|
||||
{ name: 'customHeight', remark: '自定义高度', type: 'number', defaultValue: 'null', required: '否' },
|
||||
{ name: 'selection-change', remark: '选中列表项发生改变的时候触发的回调', type: '(array) => {}', defaultValue: '-', required: '否' },
|
||||
{ name: 'order-change', remark: '排序列发生改变的时候触发的回调。el-table-column 需添加 sortable="custom" 属性', type: '(column, orderType) => {}', defaultValue: '-', required: '否' },
|
||||
{ name: 'page-change', remark: '分页数据发生改变的时候触发的回调', type: '(currentPage, pageSize) => {}', defaultValue: '-', required: '否' }
|
||||
],
|
||||
methodData: [
|
||||
{ name: 'getDataSource', remark: '获取当前表格的数据', inputArgs: '-', outArgs: 'array' },
|
||||
{ name: 'refresh', remark: '刷新当前表格的数据，可以理解为重新执行查询方法。', inputArgs: '-', outArgs: '-' }
|
||||
]
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$refs.instance.refresh()
|
||||
},
|
||||
methods: {
|
||||
FormatRowDateTimeStr,
|
||||
onTableEditClick(row) {
|
||||
console.log('编辑', row)
|
||||
},
|
||||
onTableDeleteClick(row) {
|
||||
console.log('删除', row)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
ul {
|
||||
padding-left: 20px;
|
||||
}
|
||||
.description > li{
|
||||
font-size: 12px;
|
||||
}
|
||||
</style>
|
||||
@@ -91,7 +91,19 @@
|
||||
</el-collapse-item>
|
||||
</el-collapse>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="高级组件" name="advanced" />
|
||||
<el-tab-pane label="高级组件" name="advanced">
|
||||
<el-collapse accordion>
|
||||
<el-collapse-item title="简单数据表格 CuteSimpleTable" name="CuteSimpleTable">
|
||||
<CuteSimpleTableDemo />
|
||||
</el-collapse-item>
|
||||
<el-collapse-item title="可拖拽排序的数据表格 CuteDragTable" name="CuteDragTable">
|
||||
<CuteDragTableDemo />
|
||||
</el-collapse-item>
|
||||
<el-collapse-item title="可编辑表格 CuteEditTable" name="CuteEditTable">
|
||||
<CuteEditTableDemo />
|
||||
</el-collapse-item>
|
||||
</el-collapse>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</cute-page>
|
||||
</template>
|
||||
@@ -124,10 +136,16 @@ import CutePreviewDrawerDemo from '@/views/componentsDemo/dev/CutePreviewDrawerD
|
||||
import CuteTransferDemo from '@/views/componentsDemo/dev/CuteTransferDemo.vue'
|
||||
import CuteFileUploadDemo from '@/views/componentsDemo/business/CuteFileUploadDemo.vue'
|
||||
import CuteFileDragUploadDemo from '@/views/componentsDemo/business/CuteFileDragUploadDemo.vue'
|
||||
import CuteSimpleTableDemo from '@/views/componentsDemo/CuteSimpleTableDemo.vue'
|
||||
import CuteDragTableDemo from '@/views/componentsDemo/advanced/CuteDragTableDemo.vue'
|
||||
import CuteEditTableDemo from '@/views/componentsDemo/advanced/CuteEditTableDemo.vue'
|
||||
|
||||
export default {
|
||||
name: 'SystemComponents',
|
||||
components: {
|
||||
CuteEditTableDemo,
|
||||
CuteDragTableDemo,
|
||||
CuteSimpleTableDemo,
|
||||
CuteFileDragUploadDemo,
|
||||
CuteFileUploadDemo,
|
||||
CuteTransferDemo,
|
||||
|
||||
Reference in New Issue
Block a user