Table表格选择器
约 177 字小于 1 分钟
2025-02-06
基础用法
内部组件为crud组件，大部分属性参考Crud文档
vue2
vue3
<template>
<tvue-form ref="form"
:option="option"></tvue-form>
</template>
<script setup>
import { ref } from 'vue';
import { ElMessage } from 'element-plus';
const option = ref({
column: [
{
label: '表格选择器',
prop: 'table',
type: 'table',
children: {
border: true,
column: [
{
label: '姓名',
width: 120,
search: true,
searchSpan: 24,
prop: 'name'
},
{
label: '性别',
prop: 'sex'
}
]
},
formatter: (row) => {
if (!row.name) return '';
return row.name + '-' + row.sex;
},
onLoad: ({ page, value, data }, callback) => {
if (value) {
ElMessage.success('首次查询' + value);
callback({
id: '0',
name: '张三',
sex: '男',
age: 18
});
return;
}
if (data) {
ElMessage.success('搜索查询参数' + JSON.stringify(data));
}
if (page) {
ElMessage.success('分页参数' + JSON.stringify(page));
}
callback({
total: 2,
data: [
{
id: '0',
name: '张三',
sex: '男',
age: 18
},
{
id: '1',
name: '李四',
sex: '女',
disabled: true,
age: 18
},
{
id: '2',
name: '王五',
sex: '女'
}
]
});
},
props: {
disabled: 'disabled',
label: 'name',
value: 'id'
}
}
]
});
</script>默认值
vue2
vue3
`value`属性可以提供一个初始化的默认值
<template>
<tvue-form :option="option"></tvue-form>
</template>
<script setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
const option = ref({
column: [
{
label: '表格选择器',
prop: 'table',
type: 'table',
value: '0',
children: {
border: true,
column: [
{
label: '姓名',
width: 120,
search: true,
searchSpan: 24,
prop: 'name'
},
{
label: '性别',
prop: 'sex'
}
]
},
formatter: (row) => {
if (!row.name) return ''
return row.name + '-' + row.sex
},
onLoad: ({ page, value, data }, callback) => {
if (value) {
ElMessage.success('首次查询' + value)
callback({
id: '0',
name: '张三',
sex: '男',
age: 18
})
return
}
if (data) {
ElMessage.success('搜索查询参数' + JSON.stringify(data))
}
if (page) {
ElMessage.success('分页参数' + JSON.stringify(page))
}
callback({
total: 2,
data: [
{
id: '0',
name: '张三',
sex: '男',
age: 18
},
{
id: '1',
name: '李四',
sex: '女',
age: 18
}
]
})
},
props: {
label: 'name',
value: 'id'
}
}
]
})
</script>多选
vue2
vue3
设置`multiple`属性即可启用多选
<template>
<tvue-form :option="option"
v-model="form"></tvue-form>
</template>
<script setup>
import { ref } from 'vue';
import { ElMessage } from 'element-plus';
const form = ref({
table: [0, 2]
});
const option = ref({
column: [
{
label: '表格选择器',
prop: 'table',
type: 'table',
multiple: true,
children: {
border: true,
column: [
{
label: '姓名',
width: 120,
search: true,
searchSpan: 24,
prop: 'name'
},
{
label: '性别',
prop: 'sex'
}
],
},
formatter: (row) => {
if (Array.isArray(row)) {
return row.map(ele => ele.name + '格式化').join(',');
} else {
return row.name + '格式化';
}
},
onLoad: ({ page, value, data }, callback) => {
if (value) {
ElMessage.success('首次查询' + value);
callback([
{ id: '0', name: '张三', sex: '男', age: 18 },
{ id: '2', name: '王五', sex: '女' }
]);
return;
}
if (data) {
ElMessage.success('搜索查询参数' + JSON.stringify(data));
}
if (page) {
ElMessage.success('分页参数' + JSON.stringify(page));
}
callback({
total: 2,
data: [
{ id: '0', name: '张三', sex: '男', age: 18 },
{ id: '1', name: '李四', sex: '女', disabled: true, age: 18 },
{ id: '2', name: '王五', sex: '女' }
]
});
},
props: {
disabled: 'disabled',
label: 'name',
value: 'id'
}
}
]
});
</script>禁用状态
vue2
vue3
通过`disabled`属性指定是否禁用
<template>
<tvue-form :option="option"></tvue-form>
</template>
<script setup>
import { ref } from 'vue';
const option = ref({
column: [
{
label: '表格选择器',
prop: 'table',
type: 'table',
disabled: true
}
]
});
</script>与其它框交互
vue2
vue3
利用内置的`getPropRef`方法可以获取内部值赋值给其它变量
<template>
<tvue-form ref="formRef"
:option="option"
v-model="form"></tvue-form>
</template>
<script setup>
import { ref, watch } from 'vue';
import { ElMessage } from 'element-plus';
const form = ref({});
const formRef = ref(null)
const option = ref({
column: [
{
label: '表格',
prop: 'table',
type: 'table',
children: {
border: true,
column: [
{
label: '姓名',
width: 120,
search: true,
searchSpan: 24,
prop: 'name'
},
{
label: '性别',
prop: 'sex'
}
],
},
formatter: (row) => {
if (!row.name) return '';
return row.name + '-' + row.sex;
},
onLoad: ({ page, value, data }, callback) => {
if (value) {
ElMessage.success('首次查询' + value);
callback({
id: '0',
name: '张三',
sex: '男',
age: 18
});
return;
}
if (data) {
ElMessage.success('搜索查询参数' + JSON.stringify(data));
}
if (page) {
ElMessage.success('分页参数' + JSON.stringify(page));
}
callback({
total: 2,
data: [
{
id: '0',
name: '张三',
sex: '男',
age: 18
},
{
id: '1',
name: '李四',
sex: '女',
age: 18
}
]
});
},
props: {
label: 'name',
value: 'id'
}
},
{
label: '性别',
prop: 'sex'
},
{
label: '年龄',
prop: 'age'
}
]
});
watch(() => form.value.table, () => {
const table = formRef.value.getPropRef('table').$refs.temp;
let active = table.active;
if (Array.isArray(active)) active = active[0];
form.value.sex = active.sex;
form.value.age = active.age;
});
</script>