如图为表格示例图
图片.png
操作详解
1.
<a-spin :spinning="loading">
<!-- 操作按钮 -->
<div>
<a-button type="primary" icon="plus" @click="handleClickAdd">新增</a-button>
<span style="padding-left: 8px;"></span>
<template v-if="selectedRowKeys.length>0">
<a-popconfirm
:title="`确定要删除这 ${1} 项吗?`"
@confirm="handleConfirmDelete">
<a-button type="primary" icon="minus">删除</a-button>
<span class="gap"></span>
</a-popconfirm>
</template>
</div>
</a-col>
</a-row>
<!-- 表格展示 -->
<a-table
:columns="columns"
:data-source="listData"
:row-key="record => record.rowIndex"
:row-selection="{ selectedRowKeys: selectedRowKeys, onChange: handleSelectionChange }">
<!-- 左侧固定td展示方式 eg:1 1.1 1.1.1 数据变化时做出的处理 -->
<span slot="rowIndex" slot-scope="text, record">
<span style="min-width:100px;">{{ record.rowIndex }}</span>
</span>
<!-- 名称展示，没有填写 文字提示需要填写 -->
<span slot="columnName" slot-scope="text, record">
<a-tooltip>
<template v-if="!record.columnName" #title>
<span class="numeric-input-title">请输入名称</span>
</template>
<a-input placeholder="请输入名称" v-model="record.columnName"/>
</a-tooltip>
</span>
<!-- 类型选择后需要在‘CHILD’的时候展示添加子集按钮 添加子集 -->
<span slot="columnType" slot-scope="text, record" style="display: flex;">
<a-tooltip>
<template v-if="!record.columnType" #title>
<span class="numeric-input-title">请选择类型</span>
</template>
<a-select
v-model="record.columnType"
placeholder="请选择类型"
dictCode="database_column_type"
@input="changeColumnType(record)"
/>
</a-tooltip>
<span
v-if="record.columnType === 'CHILD'"
type="text"
@click="handleChildrenClickAdd(record)"
>添加子集</span>
</span>
<!-- number 类型添加，控制只能填正整数 min 最小值，max 最大值， step 每次加1-->
<span slot="length" slot-scope="text, record">
<a-input-number
v-model:value="record.length"
:min="1"
:max="9999999"
:step="1"
:formatter="(value) => `${value}`"
:parser="(value) => value.replace('.', '')"
/>
</span>
<!-- 普通checkbox -->
<span slot="nullable" slot-scope="text, record">
<a-checkbox v-model:checked="record.nullable"></a-checkbox>
</span>
<!-- 需要修改值的 checkbox 如果字符串别的字符 需要自行修改值的定义以及参数-->
<span slot="isRequired" slot-scope="text, record">
<a-checkbox v-model:checked="record.isRequired"></a-checkbox>
</span>
</a-table>
</a-spin>
<script>
export default {
name: 'Table',
props: {},
data() {
return {
showClearSelectButton: '',
selectedRowKeys: [], // 选中的行的 rowKey 数组
deleteIds: [],
// 表头
columns: [
{
title: '#',
align: "center",
dataIndex: 'rowIndex',
width: 120,
scopedSlots: {customRender: 'rowIndex'},
},
{
title: '名称',
align: "center",
dataIndex: 'columnName',
scopedSlots: {customRender: 'columnName'},
},
{
title: '类型',
align: "center",
dataIndex: 'columnType',
scopedSlots: {customRender: 'columnType'},
},
{
title: '长度',
align: "center",
dataIndex: 'length',
scopedSlots: {customRender: 'length'},
},
{
title: 'checkbox',
align: "center",
dataIndex: 'nullable',
scopedSlots: {customRender: 'nullable'}
},
{
title: '是否必填',
align: "center",
dataIndex: 'isRequired',
scopedSlots: {customRender: 'isRequired'}
}
],
}
},
created() {},
// 计算属性
computed: {},
// 侦听器
watch: {
// 监听表格数据list
listData: {
deep: true,
handler(newData, oldData) {
// 发生变化时，定义ID为1， 循环数据++
let id = 1
this.listData.forEach((item) => {
item.rowIndex = id++; // 一级设置唯一ID
if (item.children.length) {
this.addIds(item.children, item.rowIndex); // 递归处理子节点
}
})
}
}
},
mounted() {},
methods: {
// 递归处理子节点ID
addIds(data, itemRowIndex) {
let ids = 1
data.forEach((item) => {
item.rowIndex = itemRowIndex + '.' +ids++; // 设置唯一ID
if (item.children.length) {
this.addIds(item.children, item.rowIndex); // 递归处理子节点
}
})
},
// 新增数据的初始化
valueData() {
const form = {}
this.columns.map(item => {
form[item.dataIndex] = ''
})
form.columnType = 'CHILD'
form.children = []
return form
},
// 添加一级数据
handleClickAdd() {
this.listData.push(this.valueData())
},
// 给数据添加子集
handleChildrenClickAdd(record) {
record.children.push(this.valueData())
},
// 选择字段类型时 清空 children
changeColumnType(record) {
if(record.columnType !== 'CHILD') {
record.children = []
}
},
// 删除操作
handleConfirmDelete() {
this.listDataFun(this.listData, this.selectedRowKeys)
this.this.selectedRowKeys = []
},
// 递归删除数据的集合
listDataFun(data, selectData) {
selectData.forEach((s) => {
data.forEach((i, index) => {
if(i.rowIndex === s) {
// 获取删除的id数据
this.getDeleteIds([i])
data.splice(index, 1);
}
if(i.rowIndex !== s) {
if(i.children.length) {
this.listDataFun(i.children, selectData); // 递归处理子节点
}
}
})
})
},
// 递归删除的数据集合 deleteIds
getDeleteIds(data) {
data.forEach((item) => {
if(item.id) {
this.deleteIds.push(item.id)
}
if(item.children.length) {
this.getDeleteIds(item.children)
}
})
},
// 列表选中的数据
handleSelectionChange(selectedRowKeys) {
this.selectedRowKeys = selectedRowKeys;
},
/** Sync 获取所有的数据，包括values、deleteIds */
getAllSync() {
const num = this.validateFun(this.listData)
if(num > 0) {
return false
} else {
let result = {}
result.error = 0
result.values = this.listData
result.deleteIds = this.deleteIds
// return result 或者成功的处理调用
}
},
// 校验数据提示错误
validateFun(valiDates) {
const num = 0
valiDates.forEach((item) => {
if (!item.columnName || !item.columnType || !item.columnComments) {
this.$message.warning('名称、类型、描述不能为空，请假查数据填写是否正确！')
num = num ++
} else {
//校验名称不能有.
if (item.columnName.match(/\./)) {
this.$message.warning('字段名称不能出现.请检查！')
num = num ++
}
}
// 递归校验全部数据子节点
if(item.children.length) {
this.validateFun(item.children)
}
})
return num
}
}
}
</script>
网友评论