tiangong-doc
2024-03-19
目录

TgTableListPlus 表格

# TgTableListPlus 表格

# Attributes

属性名 说明 类型 默认值
page 页面模型 Object {}
isCheckbox 表格是否显示checkbox Boolean false
table 表格数据分页等信息 Object {rows: [], paging: { pageSize: 10, pageNum: 1, }, total: 100, loading: false}
stripe 表格是否为斑马纹 Boolean true
showPage 是否显示分页 Boolean true
hideTotal 隐藏总的条数 Boolean false
height 高度 Number 400
showFilterSetting 是否显示表格配置按钮 Boolean true
showDensity 是否显示密度按钮 Boolean true
showFullScreen 是否显示全屏按钮 Boolean true
confirmLoading 是否出现清空按钮 Boolean false
class 自适应高度 String
isExpand 表格的展开功能 Boolean false
pasteMode 表格的粘贴模式(addAll,all,custom) String add (粘贴数据，不新增行)
editMode 表格的编辑模式 (single,batch) String single(单行编辑)
enterMode 表格编辑回车的模式(enterAdd,enterBack,custome,enterNext) String enterBack(光标继续往下回车)
继承el-table的所有属性

# Events

结合页面模型的方法进行操作

名称 说明 类型 参数
page.rowClickEx 当某一行被双击时会触发该事件(结合页面模型) Functon row
page.rowClick 当某一行被点击时会触发该事件(结合页面模型) Functon row
clearSelection 用于多选表格，清空用户的选择 Functon
getSelectionRows 返回当前选中的行 Functon
toggleRowSelection 用于多选表格，切换某一行的选中状态，如果使用了第二个参数，则可直接设置这一行选中与否 Functon (row,checked)
toggleAllSelection 用于多选表格，切换全选和全不选 Functon
selectionChange 当选择项发生变化时会触发该事件
selectAllAction 当用户手动勾选全选 Checkbox 时触发的事件
selectAll 表格全选方法 Functon
selectOne 当用户手动勾选数据行的 Checkbox 时触发的事件 Functon
doLayout 对 Table 进行重新布局 Functon
page.tableRowEdit 表格编辑：表格单行编辑(结合页面模型) Functon row
page.tableBatchEdit 表格编辑：表格批量编辑(结合页面模型) Functon
page.tableEditEnd 表格编辑：表格结束编辑(结合页面模型) Functon
page.tableDelRow 表格编辑：表格行的删除(结合页面模型) Functon row
page.tableRestoreRow 表格编辑：表格删除行的恢复(结合页面模型) Functon row
page.tableValidateRow 表格编辑：表格当前行的校验(结合页面模型) Functon index
page.tableValidateAll 表格编辑：表格的校验(结合页面模型) Functon
page.tableSaveRow 表格编辑：表格行的保存(结合页面模型) Functon index, row
page.getTableData 表格编辑：获取当前表格的数据(结合页面模型) Functon
page.getDeleteData 表格编辑：获取当前表格删除的数据(结合页面模型) Functon
page.getAddData 表格编辑：获取当前表格新增的数据(结合页面模型) Functon
page.tableAddRow 表格编辑：表格批量新增空的一行(结合页面模型) Functon
page.tableMoveUp 表格编辑：当前行上移(结合页面模型) Functon index, row
page.tableMoveDown 表格编辑：当前行下移(结合页面模型) Functon index, row

# 配置文件

# columns配置

属性名 说明 类型 默认值
label 列名称 String
field 列字段 String
show 是否显示 Boolean Boolean
filterShow 筛选列是否显示 Boolean true
width 宽度 String true
export 是否导出 Boolean true
fixed 固定 Boolean true
columnProps 表格的Tablecolumn属性 Object {}
editColumnProps 表格编辑列的属性 Object {}

# columnProps

属性名 说明 类型 默认值
header-align 表头对齐方式， String 'left'
show-overflow-tooltip 当内容过长被隐藏时显示 tooltip Boolean false
sortable 是否排序 Boolean false
sortField 指定数据按照哪个属性进行排序，仅当 sortable 设置为 true有效(sortField=b.ieFlag) String
align 对齐方式 String 'left'

# editColumnProps

属性名 说明 类型 默认值
disabled 表格编辑列，当前列是否设置：disabled Boolean false
readonly 表格编辑列，当前列是否设置：readonly Boolean false
component 表格编辑列,控件的类型(Input,ChooseEx,Choose) String Input
dataType 表格编辑列,设置数据源的类型(针对component=ChooseEx或者Chooose) String
继承el-input的所有属性
继承tg-choose-plus的所有属性
继承tg-choose-plus-ex的所有属性

# 示例代码

# 基本用法

<tg-table-list-plus isCheckbox ref="table" :page="page" :table="page.data.table" class="fit">
  <template #tg_button>
    <tg-button @click="page.add" icon="CirclePlus" :name="tm('action.add','新增')"/>
    <tg-button @click="page.exp" icon="Download" :name="tm('action.download','下载')"/>
    <tg-button type="danger" @click="page.delBatch" icon="Delete"
               :name="tm('action.batchDelete','批量删除')"/>
  </template>
  <el-table-column :label="tm('action.oper','操作')" fixed="right" width="160px">
    <template #default="scope">
      <tg-button @click="page.edit(scope.row)" icon="Edit" text :name="tm('action.edit','编辑')"/>
      <tg-button @click="page.del(scope.row)" icon="Delete" text :name="tm('action.delete','删除')"/>
    </template>
  </el-table-column>
</tg-table-list-plus>

<script setup>
  import {tm} from '@i18nHelper'
  import QueryPage from "@coreQueryPage";
  import {columns} from "./setting/list.set"
  import {defaultTableProps} from '@componentSetting'

  let {page} = QueryPage()
  page.context.name = 'PageDemo_FrmEciBaseList'
  page.data.deleteApi = apis.appGen.delete
  page.data.searchApi = apis.appGen.search

  page.useTable({
    ...defaultTableProps,  //表格属性
    columns: columns,  //表格列信息
    rowkey: 'id',//主键
    immediate: true,//一打开界面就查询
  })
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

配置文件属性

list.set.js文件

export const columns = [  
	{  
	label: '主键id',  
	field: "id",  
	show: false,  
	width: "100px",  
	export: true,  
	fixed: true,  
	// 是否默认显示序号列  
	columnNumber: true,  
	columnProps: {  
		"show-overflow-tooltip": true,  
		sortable: false,  
		},  
	},  
	{  
	label: '名称',  
	field: "name",  
	show: true,  
	width: "160px",  
	export: true,  
	columnProps: {  
		"show-overflow-tooltip": true,  
		sortable: true,  
		
		},  
	},  
	{  
	label:'代码',  
	field: "custCode",  
	show: true,  
	width: "160px",  
	export: true,  
	fixed: true,  
	columnProps: {  
		"show-overflow-tooltip": true,  
		sortable: true,  
		},  
	},  
	{  
	label: 'ieFlag',  
	field: "iEFlag",  
	show: true,  
	width: "160px",  
	export: true,  
	fixed: true,  
	columnProps: {  
		"show-overflow-tooltip": true,  
		sortable: true,  
		},  
	},  
	{  
	label: 'ieFlagName',  
	field: "iEFlagName",  
	show: true,  
	width: "160px",  
	export: true,  
	fixed: true,  
	columnProps: {  
		"show-overflow-tooltip": true,  
		 sortable: true,  
		 sortField: "b.ieFlag",//通过b表的ieFlag来进行排序
		},  
	},  
];
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68

# 表格列的自定义配置


通过表格插槽： #字段 名称修改
示例：#useCache="{scope}"

<tg-table-list-plus isCheckbox ref="table" :page="page" :table="page.data.table" class="fit">
  <!--针对useCache列，进行自定义配置成el-switch显示 -->
  <template #useCache="{scope}">
    <el-switch v-model="scope.row['useCache']" active-value="Y"
               inactive-value="N" disabled></el-switch>
  </template>
</tg-table-list-plus>
1
2
3
4
5
6
7
8
9
10
11

# 表格不分页

设置是否显示分页属性：showPage，默认值：true
设置是否隐藏总条数属性：hideTotal，默认值：false

<tg-table-list-plus ref="table" :page="page" :table="page.data.table" :showPage="false">
</tg-table-list-plus>
1
2
3
4
5
6

# 自适应高度

设置属性：class="fit"
<tg-table-list-plus ref="table" :page="page" :table="page.data.table" class="fit">
</tg-table-list-plus>
1
2
3
4

# 表格配置不显示


设置属性：showFilterSetting=false

<tg-table-list-plus ref="table" :page="page" :table="page.data.table" :showFilterSetting="false">
</tg-table-list-plus>
1
2
3
4
5
6

# 表格事件的处理

直接使用页面模型的page.rowClick和page.rowClickEx方法
<tg-table-list-plus ref="table" :page="page" :table="page.data.table">
</tg-table-list-plus>

<script setup>
  import {tm} from '@i18nHelper'
  import QueryPage from "@coreQueryPage";
  import {columns} from "./setting/list.set"
  import {defaultTableProps} from '@componentSetting'

  let {page} = QueryPage()
  page.context.name = 'PageDemo_FrmEciBaseList'
  page.data.deleteApi = apis.appGen.delete
  page.data.searchApi = apis.appGen.search

  page.useTable({
    ...defaultTableProps,  //表格属性
    columns: columns,  //表格列信息
    rowkey: 'id',//主键
  })

  //双击
  page.rowClick = (data) => {

  }
  //单击
  page.rowClickEx = (data) => {

  }
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

# 表格的列是通过数据库加载的


<tg-table-list-plus ref="table" :page="page" :table="page.data.table">
</tg-table-list-plus>

<script setup>
  import {tm} from '@i18nHelper'
  import QueryPage from "@coreQueryPage";
  import {defaultTableProps} from '@componentSetting'

  let {page} = QueryPage()
  page.context.name = 'PageDemo_FrmEciBaseList'
  page.data.deleteApi = apis.appGen.delete
  page.data.searchApi = apis.appGen.search

  //设置initUI 表格列是从数据库拉取的
  page.useTable({
    ...defaultTableProps,  //表格属性
    columns: [],  //表格列信息
    rowkey: 'id',//主键
    initUI: getChooseConfig

  })

  //动态获取表格列的数据
  async function getChooseConfig() {
    let tableColumns = []
    let request = new TgHttp();
    let response = await request.build(apis.xxx.xxxx).post();
    if (response?.success) {
      let columns = response.data?.chooseColumns
      columns?.forEach((item) => {
        let column = {
          label: item.name,
          field: item.code,
          show: true
        }
        tableColumns.push(column)
      })
    }
    return tableColumns
  }

</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

# 表格的expand的功能


添加expand的列

<tg-table-list-plus ref="table" :page="page" :table="page.data.table">
	<el-table-column  type="expand"  fixed>  
		<template #default="scope">  
			<div>  
				<p>{{ scope.row.name }}</p>
			</div>  
		</template>  
	</el-table-column>
</tg-table-list-plus>

<script setup>
  import {tm} from '@i18nHelper'
  import QueryPage from "@coreQueryPage";
  import {defaultTableProps} from '@componentSetting'

  let {page} = QueryPage()
  page.context.name = 'PageDemo_FrmEciBaseList'
  page.data.searchApi = apis.appGen.search

  //设置initUI 表格列是从数据库拉取的
  page.useTable({
    ...defaultTableProps,  //表格属性
    columns: [],  //表格列信息
    rowkey: 'id',//主键
    initUI: getChooseConfig
  })

</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

# 在表格上面要显示汇总信息


添加插槽：#tg_table_info

<tg-table-list-plus ref="table" :page="page" :table="page.data.table">
	<template #tg_table_info>表格上面的汇总信息信息</template>
</tg-table-list-plus>

<script setup>
  import {tm} from '@i18nHelper'
  import QueryPage from "@coreQueryPage";
  import {defaultTableProps} from '@componentSetting'

  let {page} = QueryPage()
  page.context.name = 'PageDemo_FrmEciBaseList'
  page.data.searchApi = apis.appGen.search

  //设置initUI 表格列是从数据库拉取的
  page.useTable({
    ...defaultTableProps,  //表格属性
    columns: [],  //表格列信息
    rowkey: 'id',//主键
    initUI: getChooseConfig
  })

</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

# 表格的单击和双击事件


<script setup name="FrmEciBaseList">  

//表格的单击事件
page.rowClickEx = (row) => {
	//row是选中的行
}
//表格的双单击事件
page.rowClick = (row) => {
	//row是选中的行
}
  
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

# 表格的勾选数据方法

<template>
	<tg-button plain @click="selectOne()">选中表格第一行数据</tg-button>
	
	<tg-table-list-plus ref="table" :page="page" :table="page.data.table">
	</tg-table-list-plus>
</template>

<script setup name="FrmEciBaseList">  

let table = ref()
function selectOne(){
    //获取第一条数据
	let row = page.data.table.rows[0];  
	table.value?.toggleRowSelection(row, true)
}
  
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

# 表格清空勾选数据方法

<template>
	<tg-button plain @click="clearSelection()">表格清空勾选数据</tg-button>
	
	<tg-table-list-plus ref="table" :page="page" :table="page.data.table">
	</tg-table-list-plus>
</template>

<script setup name="FrmEciBaseList">  

let table = ref()
function clearSelection(){
	table.value?.clearSelection()
}
  
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

# 表格全选数据的方法

<template>
	<tg-button plain @click="toggleAllSelection()">表格全选数据</tg-button>
	
	<tg-table-list-plus ref="table" :page="page" :table="page.data.table">
	</tg-table-list-plus>
</template>

<script setup name="FrmEciBaseList">  

let table = ref()
function toggleAllSelection(){
	table.value?.selectAll()
}
  
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

# 获取表格勾选的行的数据

<template>
	<tg-button plain @click="getSelection()">获取勾选行</tg-button>
	
	<tg-table-list-plus ref="table" :page="page" :table="page.data.table">
	</tg-table-list-plus>
</template>

<script setup name="FrmEciBaseList">  
import QueryPage from "@coreQueryPage";
let {page} = QueryPage()

let table = ref()
function getSelection(){
	//结合页面模型使用
	let row=page.selection();
}
  
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

# 获取表格没有勾选的行的数据

<template>
	<tg-button plain @click="getUnSelection()">获取没有勾选行</tg-button>
	
	<tg-table-list-plus ref="table" :page="page" :table="page.data.table">
	</tg-table-list-plus>
</template>

<script setup name="FrmEciBaseList">  
import QueryPage from "@coreQueryPage";
let {page} = QueryPage()

let table = ref()
function getUnSelection(){
	//结合页面模型使用
	let row=page.unSelection();
}
  
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

# 表格获取勾选的key

<template>
	<tg-button plain @click="selectedKeys()">获取勾选的key</tg-button>
	
	<tg-table-list-plus ref="table" :page="page" :table="page.data.table">
	</tg-table-list-plus>
</template>

<script setup name="FrmEciBaseList">  
import QueryPage from "@coreQueryPage";
let {page} = QueryPage()

let table = ref()
function selectedKeys(){
	//结合页面模型使用
	let keys=page.selectedKeys();
}
  
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

# 表格获取没有勾选的key

<template>
	<tg-button plain @click="getUnSelectedKeys()">获取没有勾选的key</tg-button>
	
	<tg-table-list-plus ref="table" :page="page" :table="page.data.table">
	</tg-table-list-plus>
</template>

<script setup name="FrmEciBaseList">  
import QueryPage from "@coreQueryPage";
let {page} = QueryPage()

let table = ref()
function getUnSelectedKeys(){
	//结合页面模型使用
	let keys=page.unSelectedKeys();
}
  
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

# 获取选中行的，某个字段的值

<template>
	<tg-button plain @click="getSelectedField()">获取选中行的，某个字段的值</tg-button>
	
	<tg-table-list-plus ref="table" :page="page" :table="page.data.table">
	</tg-table-list-plus>
</template>

<script setup name="FrmEciBaseList">  
import QueryPage from "@coreQueryPage";
let {page} = QueryPage()

let table = ref()
function getSelectedField(){
	//获取勾选行的code的值的集合，用逗号分隔
	let keys=page.selectedField('code');
}
  
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

# 获取没有选择行的，某个字段的值

<template>
	<tg-button plain @click="getUnSelectedField()">获取没有选择行的，某个字段的值</tg-button>
	
	<tg-table-list-plus ref="table" :page="page" :table="page.data.table">
	</tg-table-list-plus>
</template>

<script setup name="FrmEciBaseList">  
import QueryPage from "@coreQueryPage";
let {page} = QueryPage()

let table = ref()
function getUnSelectedField(){
	//获取没有勾选行的code的值的集合，用逗号分隔
	let keys=page.unSelectedField('code');
}
  
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

# 后续提供的功能(已修改element-plus源码)

# 插槽控制固定列左或者右
设置属性：action-name='操作' ,默认值：''
        action-postion='left'，默认值：'right'，固定在右边。(固定左边：'left')
        action-width='260px'，默认值：'160px'

<TgTableListPlus ref="table" :page="page" :table="page.data.table" class="fit"  
	action-name="操作"  action-postion="left"  actionWidth="260px">  
	<template #action="scope">  
		<tg-button @click="page.edit(scope.row)" icon="Edit" text :name="tm('action.edit','编辑')"/>  
		<tg-button @click="page.del(scope.row)" icon="Delete" text :name="tm('action.delete','删除')"/>  
	</template>  
</TgTableListPlus>

<script setup>
  import {tm} from '@i18nHelper'
  import QueryPage from "@coreQueryPage";
  import {defaultTableProps} from '@componentSetting'

  let {page} = QueryPage()
  page.context.name = 'PageDemo_FrmEciBaseList'
  page.data.searchApi = apis.appGen.search

  //设置initUI 表格列是从数据库拉取的
  page.useTable({
    ...defaultTableProps,  //表格属性
    columns: [],  //表格列信息
    rowkey: 'id',//主键
    initUI: getChooseConfig
  })

</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
# 表格行筛选
# 表格行筛选配置文件示例

说明:

1，优先级：插槽>配置文件

2，通过添加属性：searchColumnProps 设置筛选列的控件；查询区域里面的配置控件配置一致

3，默认是Input

4，设置componentProps的属性，会全部添加到组件上


export const columns = [  
{  
	label: tm('appGen.name', '名称'),  
	field: "name",  
	show: true,  
	width: "160px",  
	export: true,  
	searchColumnProps: {  
		field: 'name',//可以省略。默认是外面的field
		component: "Input"//可以省略
		show:true,
		query: 'auto',
		componentProps:{
		    
		}
	}  
},  
{  
	label: tm('appGen.custCode', '代码'),  
	field: "custCode",  
	show: true,  
	width: "160px",  
	export: true,  
	fixed: true,  
	searchColumnProps: {  
		field: 'custCode',//可以省略。默认是外面的field
		component: "ChooseEx",  //下拉框
		show:true,
		query: 'auto',
		componentProps:{
		    dataType: "BASE_TRADE",  
		} 
	}  
},  
{  
	label: tm('appGen.gNo', 'gNo'),  
	field: "gNo",  
	show: true,  
	sort: false,  
	export: true,  
	fixed: true,  
	columnProps: {  
	"show-overflow-tooltip": true,  
	sortable: false,  
	},  
	searchColumnProps: {  
		field: 'gNo',//可以省略。默认是外面的field
		component: "Select",  //下拉框
		show:true,
		query: 'auto',
		componentProps:{
		    dataType: "BASE_TRADE",  
		}
	}  
},  
{  
	label: tm('appGen.detail', '详细'),  
	field: "detail",  
	show: true,  
	width: "160px",  
	export: true,  
	fixed: false,  
}  
];
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66

设置属性：tgFilter
1,查询控件的类型：通过list.set.js中的searchFormSchema显示的
2,如果searchFormSchema中没有的话，就默认显示input
3,如果当前的列不想显示查询的框：在表格列的columns数组中的，对当前列的filterShow=false，就不会显示查询框 

<tg-table-list-plus  isCheckbox  ref="table"  :page="page"  :table="page.data.table"  class="fit"  :action-name="tm('action.oper', '操作')"  
action-postion="right" actionWidth="380px" tgFilter>  
  
</tg-table-list-plus>

<script setup>
  import {tm} from '@i18nHelper'
  import QueryPage from "@coreQueryPage";
  import {defaultQueryProps,defaultTableProps} from '@componentSetting'
  import {columns, searchFormSchema} from "./setting/list.set";

  let {page} = QueryPage()
  page.context.name = 'PageDemo_FrmEciBaseList'
  page.data.searchApi = apis.appGen.search

  //设置查询的schema
  page.useQueryForm({  
	...defaultQueryProps,  
	schema: searchFormSchema,  
  });

  //设置initUI 表格列是从数据库拉取的
  page.useTable({
    ...defaultTableProps,  //表格属性
    columns: columns,  //表格列信息
    rowkey: 'id',//主键
  })

</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
# 表格行筛选插槽示例

设置属性：tgFilter
通表格列的插槽：设置查询条件显示的控件类型。如果不设置，默认显示input框
#headerFilter__属性名

<tg-table-list-plus  isCheckbox  ref="table"  :page="page"  :table="page.data.table"  class="fit"  :action-name="tm('action.oper', '操作')"  
action-postion="right" actionWidth="380px" tgFilter>  
  
	<template #headerFilter__name>  
		<TgChoosePlusEx  :page="page"  :entity="page.data.entity"  
code-field="name"  v-model="page.data.entity.name"  data-type="BASE_TRADE"  
/>  
	</template>  
	<template #headerFilter__detail>  
		<tg-input v-model="page.data.entity['detail']" disabled="true"/>  
	</template>  
	<template #headerFilter__custCode>  
			<tg-select-plus  data-type="$YN"  v-model="page.data.entity['custCode']"  ></tg-select-plus>  
	</template>  
	<template #headerFilter__createTime>  
		<tg-date-picker  format="YYYY-MM-DD"  v-model="page.data.entity['createTime']"  value-format="YYYY-MM-DD"  
>	</tg-date-picker>  
	</template>  
  
</tg-table-list-plus>

<script setup>
  import {tm} from '@i18nHelper'
  import QueryPage from "@coreQueryPage";
  import {defaultTableProps} from '@componentSetting'
  import {columns} from "./setting/list.set";

  let {page} = QueryPage()
  page.context.name = 'PageDemo_FrmEciBaseList'
  page.data.searchApi = apis.appGen.search

  //添加查询条件  
page.addTableQuery("detail|A.DETAIL|s|l|and,name|A.NAME|s|l|and,custCode|A.CUST_CODE|s|l|=,createTime|A.CREATE_TIME|s|>|and”)

  //设置initUI 表格列是从数据库拉取的
  page.useTable({
    ...defaultTableProps,  //表格属性
    columns: columns,  //表格列信息
    rowkey: 'id',//主键
  })

</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
# 表格单行编辑(结合页面模型)
# 默认使用方法(页面通过插槽)
设置属性：editMode='single' ,默认值：'single'

自定义事件：
	1，singleChangeRow，单行编辑的时候，如果发现有其他行正在编辑，抛出此事件
	2，singleInputEnter 单行编辑的时候，如在最后一个控件回车，抛出事件给用户
	3，editRowClick(row) 单击当前行，抛出此事件

<tg-table-list-plus  isCheckbox  ref="table"  :page="page"  :table="page.data.table"  class="fit"  
:action-name="tm('action.oper', '操作')"  action-postion="right"  
actionWidth="380px"  enterMode="enterAdd"    
	@single-change-row="onSingleChangeRow"  
@single-input-enter="onInputEnter"  edit-mode="single"  >  
  
<template #editting__name="scope">  
	<TgChoosePlusEx  
	:page="page"  
	:entity="scope.row"  
	code-field="name"  
	:focusSelect="true"  
	v-model="scope.row['name']"  
	data-type="BASE_TRADE"  
	@choose="getData"  
	actionWidth="200px"/>  
</template>  
  
  
<template #tg_button>  
  
<template #action="scope">  
	<tg-button  @click="editAct(scope.row)" icon="Edit" text name="行编辑"  />  
	<tg-button  @click="saveRowAct(scope.$index,scope.row)" text name="行保存" /> 
	<tg-button  @click="validate(scope.$index)" text  name="行校验"  />  
	<tg-button  @click="del2(scope.row)"  text  name="行删除"  />  
	<tg-button  @click="restore(scope.row)"  text  name="行还原"  />  
	<tg-button  @click="moveUp(scope.$index,scope.row)" text name="上移"  />  
	<tg-button  @click="moveDown(scope.$index,scope.row)"  text  name="下移" /> 
</template>  
  
</tg-table-list-plus>


<script setup>
  import {tm} from '@i18nHelper'
  import QueryPage from "@coreQueryPage";
  import {defaultTableProps} from '@componentSetting'

  let {page} = QueryPage()
	page.context.name = "PageDemoZC_FrmEciBaseListZC";  
	page.data.deleteApi = apis.appGen.delete;  
	page.data.searchApi = apis.appGen.search;  
	page.data.saveApi = apis.appGen.save;

  //设置initUI 表格列是从数据库拉取的
  page.useTable({
    ...defaultTableProps,  //表格属性
    columns: [],  //表格列信息
    rowkey: 'id',//主键
    initUI: getChooseConfig
  })
  
  //添加表格校验规则
page.addNotNull("detail,custCode,iEFlag", 'blur')

//编辑
function editAct(row) {  
	page.tableRowEdit(row)  
}
//保存
function saveRowAct(index, row) {  
	//调用框架的保存单行的逻辑  
	page.tableSaveRow(index, row)  
}
//校验
function validate(index) {  
	page.tableValidateRow(index, (val) => {  
		if (val) {  
			tg.msg.success('校验成功')  
		} else {  
			tg.msg.error('校验失败')  
		}  
	})  
}
//删除数据库的数据
function del2(row) {  
	page.tableDelRow(row)  
}
//还原数据库的数据
function restore(row) {  
	page.tableRestoreRow(row)  
}
//上移
function moveUp(index, row) {  
	page.tableMoveUp(index, row)  
}
//下移
function moveDown(index, row) {  
	page.tableMoveDown(index, row)  
}

//单行编辑，如果有其他行在编辑，抛出自定义事件。editRow:之前编辑的行
function onSingleChangeRow(obj){
	alert('当行编辑，正在编辑行：' + JSON.stringify(obj.editRow))  
	alert('当前点击的行：' + JSON.stringify(obj.currentRow))
}

//单行编辑，在最后一个控件回车，抛出此事件
function onInputEnter(index, row) {  
	alert('当行编辑，正在编辑行：' + JSON.stringify(row))  
}

</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
# 通过配置文件 list.set.js

说明:

1，优先级：插槽>配置文件

2，通过添加属性：editColumnProps 设置编辑列的控件；现在有三种类型：Input，Choose，ChooseEx

3，默认是Input

4，设置Choose或者ChooseEx的时候，需要设置数据源dataType

5，设置componentProps的属性，会全部添加到组件上


export const columns = [  
{  
	label: tm('appGen.name', '名称'),  
	field: "name",  
	show: true,  
	width: "160px",  
	export: true,  
	editColumnProps: {  
		component: "Input"//可以省略
		show:true,
		componentProps:{
		    readonly:true
		}
	}  
},  
{  
	label: tm('appGen.custCode', '代码'),  
	field: "custCode",  
	show: true,  
	width: "160px",  
	export: true,  
	fixed: true,  
	editColumnProps: {  
		component: "ChooseEx",  //下拉框
		show:true,
		componentProps:{
		    dataType: "BASE_TRADE",  
		} 
	}  
},  
{  
	label: tm('appGen.gNo', 'gNo'),  
	field: "gNo",  
	show: true,  
	sort: false,  
	export: true,  
	fixed: true,  
	columnProps: {  
	"show-overflow-tooltip": true,  
	sortable: false,  
	},  
	editColumnProps: {  
		component: "ChooseEx",  //下拉框
		show:true,
		componentProps:{
		    dataType: "BASE_TRADE",  
		}
	}  
},  
{  
	label: tm('appGen.detail', '详细'),  
	field: "detail",  
	show: true,  
	width: "160px",  
	export: true,  
	fixed: false,  
}  
];
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
设置属性：editMode='single' ,默认值：'single'

自定义事件：
	1，singleChangeRow，单行编辑的时候，如果发现有其他行正在编辑，抛出此事件
	2，singleInputEnter 单行编辑的时候，如在最后一个控件回车，抛出事件给用户
	3，editRowClick(row) 单击当前行，抛出此事件

<tg-table-list-plus  isCheckbox  ref="table"  :page="page"  :table="page.data.table"  class="fit"  
:action-name="tm('action.oper', '操作')"  action-postion="right"  
actionWidth="380px"  enterMode="enterAdd"    
	@single-change-row="onSingleChangeRow"  
@single-input-enter="onInputEnter"  edit-mode="single"  >  
  
<template #tg_button>  
  
<template #action="scope">  
	<tg-button  @click="editAct(scope.row)" icon="Edit" text name="行编辑"  />  
	<tg-button  @click="saveRowAct(scope.$index,scope.row)" text name="行保存" /> 
	<tg-button  @click="validate(scope.$index)" text  name="行校验"  />  
	<tg-button  @click="del2(scope.row)"  text  name="行删除"  />  
	<tg-button  @click="restore(scope.row)"  text  name="行还原"  />  
	<tg-button  @click="moveUp(scope.$index,scope.row)" text name="上移"  />  
	<tg-button  @click="moveDown(scope.$index,scope.row)"  text  name="下移" /> 
</template>  
  
</tg-table-list-plus>


<script setup>
  import {tm} from '@i18nHelper'
  import QueryPage from "@coreQueryPage";
  import {defaultTableProps} from '@componentSetting'
  import {columns} from "./setting/list.set";

  let {page} = QueryPage()
	page.context.name = "PageDemoZC_FrmEciBaseListZC";  
	page.data.deleteApi = apis.appGen.delete;  
	page.data.searchApi = apis.appGen.search;  
	page.data.saveApi = apis.appGen.save;

  //设置initUI 表格列是从数据库拉取的
  page.useTable({
    ...defaultTableProps,  //表格属性
    columns: columns,  //表格列信息
    rowkey: 'id',//主键
    immediate: true,
  })
  
  //添加表格校验规则
page.addNotNull("detail,custCode,iEFlag", 'blur')

//编辑
function editAct(row) {  
	page.tableRowEdit(row)  
}
//保存
function saveRowAct(index, row) {  
	//调用框架的保存单行的逻辑  
	page.tableSaveRow(index, row)  
}
//校验
function validate(index) {  
	page.tableValidateRow(index, (val) => {  
		if (val) {  
			tg.msg.success('校验成功')  
		} else {  
			tg.msg.error('校验失败')  
		}  
	})  
}
//删除数据库的数据
function del2(row) {  
	page.tableDelRow(row)  
}
//还原数据库的数据
function restore(row) {  
	page.tableRestoreRow(row)  
}
//上移
function moveUp(index, row) {  
	page.tableMoveUp(index, row)  
}
//下移
function moveDown(index, row) {  
	page.tableMoveDown(index, row)  
}

//单行编辑，如果有其他行在编辑，抛出自定义事件。editRow:之前编辑的行
function onSingleChangeRow(obj){
	alert('当行编辑，正在编辑行：' + JSON.stringify(obj.editRow))  
	alert('当前点击的行：' + JSON.stringify(obj.currentRow))
}

//单行编辑，在最后一个控件回车，抛出此事件
function onInputEnter(index, row) {  
	alert('当行编辑，正在编辑行：' + JSON.stringify(row))  
}

</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
# 表格批量编辑(结合页面模型)
# 默认使用方法(页面通过插槽)

通过插槽实现编辑的控件

设置属性：editMode='batch' ,默认值：'single'
		pasteMode='addAll'，默认值：'all',粘贴模式：新增行粘贴：addAll, 粘贴模式：all
		enterMode='enterAdd',默认值：'enterBack';enterAdd: 回车添加一行，enterBack: 回车光标往下；'enterNext':回车当前行的下一个，回车到最后一行一列的时候，新增一行

自定义事件：
	1，batchInputEnter，回车到最后一条数据，抛出此事件
	2，editRowClick(row) 单击当前行，抛出此事件

<tg-table-list-plus  isCheckbox  ref="table"  :page="page"  :table="page.data.table"  class="fit"  
:action-name="tm('action.oper', '操作')"  action-postion="right"  
actionWidth="380px"  enterMode="enterAdd"  pasteMode="addAll" @batchInputEnter="onBatchInputEnter"   edit-mode="batch"  >  
  
<template #editting__name="scope">  
	<TgChoosePlusEx  
	:page="page"  
	:entity="scope.row"  
	code-field="name"  
	:focusSelect="true"  
	:validate="true"
	v-model="scope.row['name']"  
	data-type="BASE_TRADE"  
	@choose="getData"  
	@choose-keydown="page.handleChooseKeyDown"  
	@choose-keyup="page.handleChooseKeyUp"
	/>  
</template>  

<template #editting__iEFlag="scope">  
	<TgChoosePlus  
		:page="page"  :entity="scope.row"  code-field="iEFlag"  
	:focusSelect="true"  :validate="true"  v-model="scope.row['iEFlag']"  
	data-type="BASE_TRADE"  />  
</template>
  
<template #tg_button>  
	<tg-button  plain  @click="addRow"  icon="CirclePlus"  :name="新增"  />  
	<tg-button  plain  @click="vaildateAll"  name="表格编辑校验"  />  
	<tg-button  plain  @click="saveAll"  name="表格全部保存"  />  
	<tg-button  plain  @click="batchEdit" icon="Edit"  name="批量编辑"/>  
	<tg-button  plain  @click="getTableData"  name="获取表格的数据"  />  
</template>
  
<template #action="scope">  
	<tg-button  @click="editAct(scope.row)" icon="Edit" text name="行编辑"  />  
	<tg-button  @click="saveRowAct(scope.$index,scope.row)" text name="行保存" /> 
	<tg-button  @click="validate(scope.$index)" text  name="行校验"  />  
	<tg-button  @click="del2(scope.row)"  text  name="行删除"  />  
	<tg-button  @click="restore(scope.row)"  text  name="行还原"  />  
	<tg-button  @click="moveUp(scope.$index,scope.row)" text name="上移"  />  
	<tg-button  @click="moveDown(scope.$index,scope.row)"  text  name="下移" /> 
</template> 
  
</tg-table-list-plus>


<script setup>
  import {tm} from '@i18nHelper'
  import QueryPage from "@coreQueryPage";
  import {defaultTableProps} from '@componentSetting'
  import {columns} from "./setting/list.set";

  let {page} = QueryPage()
	page.context.name = "PageDemoZC_FrmEciBaseListZC";  
	page.data.deleteApi = apis.appGen.delete;  
	page.data.searchApi = apis.appGen.search;  
	page.data.saveApi = apis.appGen.save;

  //设置initUI 表格列是从数据库拉取的
  page.useTable({
    ...defaultTableProps,  //表格属性
    columns: columns,  //表格列信息
    rowkey: 'id',//主键
  })
  
  //添加表格校验规则
page.addNotNull("detail,custCode,iEFlag", 'blur')

//编辑
function editAct(row) {  
	page.tableRowEdit(row)  
}
//保存
function saveRowAct(index, row) {  
	//调用框架的保存单行的逻辑  
	page.tableSaveRow(index, row)  
}
//校验
function validate(index) {  
	page.tableValidateRow(index, (val) => {  
		if (val) {  
			tg.msg.success('校验成功')  
		} else {  
			tg.msg.error('校验失败')  
		}  
	})  
}
//删除数据库的数据
function del2(row) {  
	page.tableDelRow(row)  
}
//还原数据库的数据
function restore(row) {  
	page.tableRestoreRow(row)  
}
//上移
function moveUp(index, row) {  
	page.tableMoveUp(index, row)  
}
//下移
function moveDown(index, row) {  
	page.tableMoveDown(index, row)  
}

//新增空行
function addRow() {  
	page.tableAddRow()  
}

//表格校验  
function vaildateAll() {  
	page.tableValidateAll((val) => {  
		if (val) {  
		tg.msg.success('校验成功')  
		} else {  
			tg.msg.error('校验失败')  
		}  
	})  
}

//表格保存
function saveAll() {  
	page.tableValidateAll((val) => {  
		if (val) {  
			tg.msg.success('校验成功')  
			let rows = page.getTableData()  
		} else {  
			tg.msg.error('校验失败')  
		}  
	})  
}

//表格批量编辑
function batchEdit() {  
	page.tableBatchEdit()  
}

//获取当前表格的数据
function getTableData() {  
	let rows = page.getTableData()  //所有的数据
	let deleteData = page.getDeleteData()  //删除
	let addData = page.getAddData() //新增
	
	rows中表格数据的标记：
	删除：
	row.__isDeleting：true
	新增：
	row.__isAdding:true
	编辑：
	row.__isEditting:true
}

//批量处理数据：回车到最后一条数据
function onBatchInputEnter() {  
	alert('批量处理数据：回车到最后一条数据，自定义事件')  
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
# 通过配置文件 list.set.js

说明:

1，优先级：插槽>配置文件

2，通过添加属性：editColumnProps 设置编辑列的控件；现在有三种类型：Input，Choose，ChooseEx

3，默认是Input

4，设置Choose或者ChooseEx的时候，需要设置数据源dataType

5，设置componentProps的属性，会全部添加到组件上


export const columns = [  
{  
	label: tm('appGen.name', '名称'),  
	field: "name",  
	show: true,  
	width: "160px",  
	export: true,  
	editColumnProps: {  
		component: "Input",//可以省略
		show:true,
		componentProps:{
		    readonly:true
		}
	}  
},  
{  
	label: tm('appGen.custCode', '代码'),  
	field: "custCode",  
	show: true,  
	width: "160px",  
	export: true,  
	fixed: true,  
	editColumnProps: {  
		component: "ChooseEx",  //下拉框
		show:true,
		componentProps:{
		    dataType: "BASE_TRADE",  
		}
	}  
},  
{  
	label: tm('appGen.gNo', 'gNo'),  
	field: "gNo",  
	show: true,  
	sort: false,  
	export: true,  
	fixed: true,  
	columnProps: {  
	"show-overflow-tooltip": true,  
	sortable: false,  
	},  
	editColumnProps: {  
		component: "ChooseEx",  //下拉框
		show:true,
		componentProps:{
		    dataType: "BASE_TRADE",  
		}
	}  
},  
{  
	label: tm('appGen.detail', '详细'),  
	field: "detail",  
	show: true,  
	width: "160px",  
	export: true,  
	fixed: false,  
}  
];
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60

后面的代码跟上面的一致，此处省略

# 表格编辑之TgChooseEx组件的特殊使用

在表格编辑的时候，会出现这个情况：

例如：在表格中，列名是iEFlagName，使用TgChooseEx组件，绑定的是iEFlag，保存以后或者退出编辑以后，当前列显示的是名称。在编辑的时候，编辑的是代码。

# 插槽使用示例

其他代码省略，不懂的先看上面的示例

插槽名称是：#editting__iEFlagName

code-field 和v-model绑定的是：iEFlag

添加属性：isCodeAndName

<template #editting__iEFlagName="scope">  
	<TgChoosePlusEx  
	:page="page"  
	:entity="scope.row"  
	code-field="iEFlag"  
	:focusSelect="true"  
	v-model="scope.row['iEFlag']"  
	isCodeAndName  
	data-type="BASE_TRADE"  
	@choose-keydown="page.handleChooseKeyDown"  
	@choose-keyup="page.handleChooseKeyUp"/>  
</template>
1
2
3
4
5
6
7
8
9
10
11
12
# 配置文件使用示例

columns中field=iEFlagName

在editColumnProps属性中添加：field=iEFlag

在editColumnProps中添加componentProps属性，isCodeAndName=true

{  
	label: 'ieFlagName',  
	field: "iEFlagName",  
	show: true,  
	width: "300px",  
	export: true,  
	fixed: false,  
	columnProps: {  
		"show-overflow-tooltip": true,  
		sortable: true,  
	},  
	editColumnProps: {  
		component: 'ChooseEx',  
		show: true,  
		field: "iEFlag",  
		componentProps: {  
			isCodeAndName: true,  
			dataType: 'BASE_TRADE'  
		},  
	}  
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
上次更新: 2024/8/1 14:17:14
TgFilterPlus 查询筛选
TgDialog 弹框

← TgDialog 弹框→

最近更新
01
EciReport模板导出_Core
09-10
02
EciReport模板导出
09-09
03
Core权限平台接口
07-25
更多文章>
Theme by Vdoing