表格高级用法

表格初始化

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

正在加载示例…

<template>
  <el-button type="primary"
             @click="handleReload">Key初始化</el-button>
  <el-button type="primary"
             @click="handleReload1">内置方法初始化</el-button>
  <br /><br />
  <avue-crud :key="reload"
             ref="crud"
             :data="data"
             :option="option"></avue-crud>
</template>

<script setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'

const reload = ref(Math.random())
const data = ref([
  {
    username: 'smallwei',
    password: 'smallwei'
  }, {
    username: 'avue',
    password: 'avue'
  }
])
const option = ref({
  column: [
    {
      label: '用户名',
      prop: 'username'
    }, {
      label: '密码',
      prop: 'password',
      type: 'password'
    }
  ]
})

const crud = ref(null)

function handleReload () {
  reload.value = Math.random()
  ElMessage.success('初始化完成')
}

function handleReload1 () {
  if (crud.value) {
    crud.value.refreshTable()
    ElMessage.success('初始化完成')
  }
}

</script>

配置项服务端加载

提示

• 这里没有走真真的服务器请求，而是做了一个模拟

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

正在加载示例…

<template>
  <el-button type="primary"
             icon="el-icon-sort"
             @click="getOption">服务端加载</el-button>
  <br /> <br />
  <avue-crud :key="reload"
             :data="data"
             :option="option"
             :table-loading="loading" />
</template>

<script setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'

const reload = ref(Math.random())
const loading = ref(true)
const data = ref([])
const option = ref({})

function getOption () {
  ElMessage.success('模拟2s后服务端动态加载')
  setTimeout(() => {
    option.value = {
      border: true,
      align: 'center',
      menuAlign: 'center',
      column: [
        {
          label: '姓名',
          prop: 'name'
        }, {
          label: '性别',
          prop: 'sex'
        }, {
          label: '省份',
          prop: 'province',
          type: 'select',
          props: {
            label: 'name',
            value: 'code'
          },
          dicUrl: 'https://api.avuejs.com/area/getProvince',
          rules: [
            {
              required: true,
              message: '请选择省份',
              trigger: 'blur'
            }
          ]
        }]
    }
    data.value = [
      {
        name: '张三',
        sex: '男',
        province: '110000'
      }, {
        name: '李四',
        sex: '女',
        province: '120000'
      }
    ]
    loading.value = false
    reload.value = Math.random()
  }, 2000)
}
</script>

配置项切换

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

正在加载示例…

<template>
  <avue-crud ref="crud"
             :data="data"
             :option="option">
    <template #menu-left="{}">
      <el-button type="primary"
                 @click="handleSwitch"
                 icon="el-icon-sort">切 换</el-button>
    </template>
  </avue-crud>
</template>

<script setup>
import { ref, onMounted } from 'vue'

const crud = ref(null)
const type = ref(true)

const data = ref([
  {
    name: '张三',
    sex: '男',
    username: 'smallwei',
    password: 'smallwei'
  }, {
    name: '李四',
    sex: '女',
    username: 'avue',
    password: 'avue'
  }
])

const option = ref({})

const option1 = {
  addBtn: false,
  column: [
    {
      label: '姓名',
      prop: 'name',
      search: true
    }
  ]
}

const option2 = {
  addBtn: false,
  column: [
    {
      label: '用户名',
      prop: 'username',
      search: true
    }, {
      label: '密码',
      prop: 'password',
      type: 'password',
      search: true
    }, {
      label: '姓名',
      prop: 'name',
      search: true
    }
  ]
}

function handleSwitch () {
  type.value = !type.value
  option.value = type.value ? option1 : option2
  if (crud.value) {
    crud.value.refreshTable()
  }
}

onMounted(() => {
  handleSwitch()
})
</script>