Table表格选择器

基础用法

内部组件为crud组件，大部分属性参考Crud文档

效果预览可直接操作下方示例

正在加载示例…

<template>
  <avue-form ref="form"
             :option="option"></avue-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>

默认值

效果预览可直接操作下方示例

value属性可以提供一个初始化的默认值

正在加载示例…

<template>
  <avue-form :option="option"></avue-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>

多选

效果预览可直接操作下方示例

设置multiple属性即可启用多选

正在加载示例…

<template>
  <avue-form :option="option"
             v-model="form"></avue-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>

禁用状态

效果预览可直接操作下方示例

通过disabled属性指定是否禁用

正在加载示例…

<template>
  <avue-form :option="option"></avue-form>
</template>

<script setup>
import { ref } from 'vue';

const option = ref({
  column: [
    {
      label: '表格选择器',
      prop: 'table',
      type: 'table',
      disabled: true
    }
  ]
});
</script>

与其它框交互

效果预览可直接操作下方示例

利用内置的getPropRef方法可以获取内部值赋值给其它变量

正在加载示例…

<template>
  <avue-form ref="formRef"
             :option="option"
             v-model="form"></avue-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>