vxe-table

vxe-table

<vxe-grid ref='xGrid' v-bind="gridOptions"></vxe-grid>

import { defineComponent, onMounted, reactive, ref, computed } from 'vue'
import { useStore } from 'vuex'
import { VXETable, VxeGridInstance, VxeGridProps } from 'vxe-table'
import XEUtils from 'xe-utils'

// defineComponent可以给组件的setup方法准确的参数类型定义.
// defineComponent 可以接受显式的自定义 props 接口或从属性验证对象中自动推断
// defineComponent 可以正确适配无 props、数组 props 等形式
// 引入 defineComponent() 以正确推断 setup() 组件的参数类型 
// defineComponent重载函数 只是对setup函数进行封装，返回options的对象
export default defineComponent({
          // 处于 生命周期函数 beforeCreate 和 Created 两个钩子函数之间的函数,是 Composition API（组合API）的入口,
          // 在setup函数中定义的变量和方法最后都是需要 return 出去的 不然无法再模板中使用
          // 在 setup 函数中，无法使用 data 和 methods 的变量和方法
          // setup函数中的this修改成了 undefined
          // setup函数只能是同步的不能是异步的
          setup () {
          const store = useStore()
          const serveApiUrl = computed(() => store.state.serveApiUrl)
            // 使用ref函数，用于创建一个响应式数据，当数据发生改变时，Vue会自动更新UI
            // ref函数仅能监听基本类型的变化，不能监听复杂类型的变化（比如对象、数组）
            // 通过ref属性获取元素
            // vue3需要借助生命周期方法，在setup执行时，template中的元素还没挂载到页面上，所以必须在mounted之后才能获取到元素 let box = ref(null);//本质是ref(value:null) ;onMounted(()=>{box.value})
            // ref底层其实还是reactive,所以当运行时系统会自动根据传入的ref转换成reactive.
            // 在vue模板中使用ref的值不用通过value获取
            // 在ts/js代码中使用ref的值必须通过value获取
            const xGrid = ref({} as VxeGridInstance)
            // 实现响应式数据的方法
            // reactive 参数必须是对象 (json / arr)
            // 如果给 reactive 传递了其它对象
            //     默认情况下，修改对象无法实现界面的数据绑定更新。
            //     如果需要更新，需要进行重新赋值。(即不允许直接操作数据，需要放个新的数据来替代原数据)
            // 在 reactive 使用基本类型参数
            // 基本类型(数字、字符串、布尔值)在 reactive 中无法被创建成 proxy 对象，也就无法实现监听。
            // reactive的参数 成功被创建成了 proxy 对象，他通过劫持对象的 get 和 set 方法实现了对象的双向数据绑定
            // 深层的、对象内部的变化也能被察觉到
            // Date 对于这种数据类型，我们需要做特殊处理 不是直接修改值（.set），而是重新赋值（ = ）
            // 代理和源对象不同，代理是响应式的,
            const gridOptions = reactive<VxeGridProps>({
              border: true, // 是否带有边框
              showHeaderOverflow: true, //
              showOverflow: true, // 
              keepSource: true, // 保持原始值的状态
              id: 'full_edit_1',  // 唯一标识（被某些特定的功能所依赖） 
              height: 600, // 表格的高度，不能有相邻元素
              rowConfig: { // 行配置信息
                keyField: 'id', // 自定义行数据唯一主键的字段名
                isHover: true //当鼠标移到行时，是否要高亮当前行
              },
              columnConfig: { // 列配置信息
                resizable: true // 每一列是否启用列宽调整
              },
              customConfig: { // 自定义列配置项
                storage: true, // 是否启用 localStorage 本地保存，会将列操作状态保留在本地（需要有 id）
                checkMethod ({ column }) {
                  // 自定义列是否允许列选中的方法，该方法的返回值用来决定这一列的 checkbox 是否可以选中
                  if (['nickname', 'role'].includes(column.property)) {
                    return false
                  }
                  return true
                }
              },
              printConfig: { // 打印配置项
                columns: [
                  { field: 'name' },
                  { field: 'email' },
                  { field: 'nickname' },
                  { field: 'age' },
                  { field: 'amount' }
                ]
              },
              sortConfig: { // 排序配置项
                trigger: 'cell', // 触发方式 default（点击按钮触发）, cell（点击表头触发）
                remote: true // 所有列是否使用服务端排序，如果设置为 true 则不会对数据进行处理
              },
              filterConfig: { // 筛选配置项
                remote: true // 所有列是否使用服务端筛选，如果设置为 true 则不会对数据进行处理
              },
              pagerConfig: { // 分页配置项
                pageSize: 10, // 每页大小
                pageSizes: [5, 10, 15, 20, 50, 100, 200, 500, 1000] //每页大小选项列表
              },
              formConfig: { // 表单配置项
                titleWidth: 100, // 所有项的标题宽度
                titleAlign: 'right', // 所有项的标题对齐方式
                items: [ // 项列表
                  //         字段名  标题         栅格占据的列数（共 24 分栏）,前缀配置项 提示消息 自定义图标                                                       项渲染器配置项 渲染器名称     渲染的参数
                  { field: 'name', title: 'app.body.label.name', span: 8,titleSuffix: { message: 'app.body.valid.rName', icon: 'fa fa-exclamation-circle' }, titlePrefix: { message: 'app.body.valid.rName', icon: 'fa fa-exclamation-circle' },
                   itemRender: { name: '$input', props: { placeholder: '请输入名称' },
                   defaultValue: [starttime, endtime] } },
                  { field: 'email', title: '邮件', span: 8, titlePrefix: { useHTML: true, message: '点击链接：<a class="link" href="https://vxetable.cn" target="_blank">vxe-table官网</a>', icon: 'vxe-icon--question' }, itemRender: { name: '$input', props: { placeholder: '请输入邮件' } } },
                  { field: 'nickname', title: '昵称', span: 8, itemRender: { name: '$input', props: { placeholder: '请输入昵称' } } },
                  { field: 'role', title: '角色', span: 8, folding: true, itemRender: { name: '$input', props: { placeholder: '请输入角色' } } },
                  { field: 'sex', title: '性别', span: 8, folding: true, titleSuffix: { message: '注意，必填信息！', icon: 'fa fa-info-circle' }, itemRender: { name: '$select', options: [] } },
                  { field: 'age', title: '年龄', span: 8, folding: true, itemRender: { name: '$input', props: { type: 'number', min: 1, max: 120, placeholder: '请输入年龄' } } },
                  { span: 24, align: 'center', collapseNode: true, itemRender: { name: '$buttons', children: [{ props: { type: 'submit', content: 'app.body.label.search', status: 'primary' } }, { props: { type: 'reset', content: 'app.body.label.reset' } }] } }
                ],
                rules: {
                  name: [
                    { required: true, message: '必填' },
                    { min: 3, max: 50, message: '名称长度在 3 到 50 个字符' },
                    {
                      pattern: /^[1-9]\d{0,4}$|^0$/,
                      message: '/^[1-9]d{0,4}$|^0$/'
                    }
                  ]
                }
              },
              toolbarConfig: { // 工具栏配置
                buttons: [ // 左侧按钮列表
                  { code: 'insert_actived', name: '新增', icon: 'fa fa-plus' },
                  { code: 'delete', name: '直接删除', icon: 'fa fa-trash-o' },
                  { code: 'mark_cancel', name: '删除/取消', icon: 'fa fa-trash-o' },
                  { code: 'save', name: 'app.body.button.save', icon: 'fa fa-save', status: 'success' }
                ],
                refresh: true, // 刷新按钮配置
                import: true, // 导入按钮配置（需要设置 "import-config"）
                export: true, // 导出按钮配置（需要设置 "export-config"）
                print: true, // 打印按钮配置
                zoom: true, // 是否允许最大化显示
                custom: true // 自定义列配置
              },
              proxyConfig: { // 数据代理配置项（基于 Promise API）
                seq: true, // 启用动态序号代理，每一页的序号会根据当前页数变化
                sort: true, // 启用排序代理，当点击排序时会自动触发 query 行为
                filter: true, // 启用筛选代理，当点击筛选时会自动触发 query 行为
                form: true, // 启用表单代理，当点击表单提交按钮时会自动触发 reload 行为
                // 对应响应结果 { result: [], page: { total: 100 } }
                props: { // 获取的属性配置
                  result: 'result', // 配置响应结果列表字段
                  total: 'page.total' // 配置响应结果总页数字段
                },
                // 只接收Promise，具体实现自由发挥
                ajax: {
                  // 当点击工具栏查询按钮或者手动提交指令 query或reload 时会被触发
                  query: ({ page, sorts, filters, form }) => {
                    const queryParams: any = Object.assign({}, form)
                    // 处理排序条件
                    const firstSort = sorts[0]
                    if (firstSort) {
                      queryParams.sort = firstSort.property
                      queryParams.order = firstSort.order
                    }
                    // 处理筛选条件
                    filters.forEach(({ property, values }) => {
                      queryParams[property] = values.join(',')
                    })
                    return fetch(`${serveApiUrl.value}/api/pub/page/list/${page.pageSize}/${page.currentPage}?${XEUtils.serialize(queryParams)}`).then(response =>  response.json())
                  },
                  // 当点击工具栏删除按钮或者手动提交指令 delete 时会被触发
                  delete: ({ body }) => {
                    return fetch(`${serveApiUrl.value}/api/pub/save`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(body) }).then(response => response.json())
                  },
                  // 当点击工具栏保存按钮或者手动提交指令 save 时会被触发
                  save: ({ body }) => {
                    return fetch(`${serveApiUrl.value}/api/pub/save`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(body) }).then(response => response.json())
                  }
                }
                      },
              columns: [ // 列配置
                { type: 'checkbox', title: 'ID', width: 120 }, // 列的类型 seq 序号,checkbox 复选框 ,radio 单选框, expand  展开行,
                { field: 'name', title: 'Name', sortable: true, titleHelp: { message: '名称必须填写！' }, editRender: { name: 'input', attrs: { placeholder: '请输入名称' } } },
                {
                  field: 'role',
                  title: 'Role',
                  sortable: true, // 是否允许列排序   标题前缀图标配置项
                  titleHelp: { useHTML: true, content: '点击链接：<a class="link" href="https://vxetable.cn" target="_blank">vxe-table官网</a>' },
                  filters: [ // 配置筛选条件（注：筛选只能用于列表，如果是树结构则过滤根节点）
                    { label: '前端开发', value: '前端' },
                    { label: '后端开发', value: '后端' },
                    { label: '测试', value: '测试' },
                    { label: '程序员鼓励师', value: '程序员鼓励师' }
                  ],
                  filterMultiple: false, // 只对 filters 有效，筛选是否允许多选
                  editRender: { name: 'input', attrs: { placeholder: '请输入角色' } } //可编辑渲染器配置项 渲染器名称:input, textarea, select, $input, $select, $switch
                },
                { field: 'email', title: 'Email', width: 160, editRender: { name: '$input', props: { placeholder: '请输入邮件' } } }, // 渲染的参数（请查看目标渲染的 Props） $input =>props
                { field: 'nickname', title: 'Nickname', editRender: { name: 'input', attrs: { placeholder: '请输入昵称' } } }, //  input =>attrs
                {
                  field: 'sex',
                  title: 'Sex',
                  filters: [
                    { label: '男', value: '1' },
                    { label: '女', value: '0' }
                  ],
                  editRender: { name: '$select', options: [], props: { placeholder: '请选择性别' } }
                },
                { field: 'age', title: 'Age', visible: false, sortable: true, editRender: { name: '$input', props: { type: 'number', min: 1, max: 120 } } },
                {
                  field: 'amount',
                  title: 'Amount',
                  formatter ({ cellValue }) { // 格式化显示内容
                    return cellValue ? `￥${XEUtils.commafy(XEUtils.toNumber(cellValue), { digits: 2 })}` : ''
                  },
                  editRender:
                  { name: '$input', props: { type: 'float', digits: 2, placeholder: '请输入数值' } }
                },
                {
                  field: 'updateDate',
                  title: 'Update Date',
                  width: 160,
                  visible: false, // 默认是否显示
                  sortable: true,
                  formatter ({ cellValue }) {
                    return XEUtils.toDateString(cellValue, 'yyyy-MM-dd HH:ss:mm')
                  }
                },
                {
                  field: 'createDate',
                  title: 'Create Date',
                  width: 160,
                  visible: false,
                  sortable: true,
                  formatter ({ cellValue }) {
                    return XEUtils.toDateString(cellValue, 'yyyy-MM-dd')
                  }
                }
              ],
              importConfig: { // 导入配置项
                remote: true, // 是否服务端导入
                types: ['xlsx'], // 导入的文件类型列表 ['csv', 'html', 'xml', 'txt']
                modes: ['insert'], // 导入数据的方式  covering, insert
                // 自定义服务端导入
                importMethod ({ file }) {
                  const $grid = xGrid.value
                  const formBody = new FormData()
                  formBody.append('file', file)
                  return fetch(`${serveApiUrl.value}/api/pub/import`, { method: 'POST', body: formBody }).then(response => response.json()).then(data => {
                    VXETable.modal.message({ content: `成功导入 ${data.result.insertRows} 条记录！`, status: 'success' })
                    // 导入完成，刷新表格
                    $grid.commitProxy('query')
                  }).catch(() => {
                    VXETable.modal.message({ content: '导入失败，请检查数据是否正确！', status: 'error' })
                  })
                }
              },
              exportConfig: { // 导出配置项
                remote: true,
                types: ['xlsx'], // 文件类型 csv, html, xml, txt
                modes: ['current', 'selected', 'all'], // 输出数据的方式 current, selected, all
                // 自定义服务端导出
                exportMethod ({ options }) {
                  const $grid = xGrid.value
                  const proxyInfo = $grid.getProxyInfo()
                  // 传给服务端的参数
                  const body = {
                    filename: options.filename,
                    sheetName: options.sheetName,
                    isHeader: options.isHeader,
                    original: options.original,
                    mode: options.mode,
                    pager: proxyInfo ? proxyInfo.pager : null,
                    ids: options.mode === 'selected' ? options.data.map((item) => item.id) : [],
                    fields: options.columns.map((column) => {
                      return {
                        field: column.property,
                        title: column.title
                      }
                    })
                  }
                  // 开始服务端导出
                  return fetch(`${serveApiUrl.value}/api/pub/export`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(body) }).then(response => response.json()).then(data => {
                    if (data.id) {
                      VXETable.modal.message({ content: '导出成功，开始下载', status: 'success' })
                      // 读取路径，请求文件
                      fetch(`${serveApiUrl.value}/api/pub/export/download/${data.id}`).then(response => {
                        response.blob().then(blob => {
                          // 开始下载
                          VXETable.saveFile({ filename: '导出数据', type: 'xlsx', content: blob })
                        })
                      })
                    }
                  }).catch(() => {
                    VXETable.modal.message({ content: '导出失败！', status: 'error' })
                  })
                }
              },
              checkboxConfig: { // 复选框配置项
                labelField: 'id', // 复选框显示的字段名，可以直接显示在复选框中
                reserve: true, // 是否保留勾选状态，对于某些场景可能会用到，比如数据被刷新之后还保留之前选中的状态（需要有 row-config.keyField）
                highlight: true, // 高亮勾选行
                range: true //  开启复选框范围选择功能（启用后通过鼠标在复选框的列内滑动选中或取消指定行）
              },
              editRules: { // 校验
                name: [
                  { required: true, message: 'app.body.valid.rName' },
                  { min: 3, max: 50, message: '名称长度在 3 到 50 个字符' }
                ],
                email: [
                  { required: true, message: '邮件必须填写' }
                ],
                role: [
                  { required: true, message: '角色必须填写' }
                ]
              },
              editConfig: { // 可编辑配置项
                trigger: 'click', // 触发方式
                mode: 'row', // 编辑模式
                showStatus: true //只对 keep-source 开启有效，是否显示单元格新增与修改状态
              }
            })

            onMounted(() => {
              const sexList = [
                { label: '女', value: '0' },
                { label: '男', value: '1' }
              ]
              const { formConfig, columns } = gridOptions
              if (columns) {
                const sexColumn = columns[5]
                if (sexColumn && sexColumn.editRender) {
                  sexColumn.editRender.options = sexList
                }
              }
              if (formConfig && formConfig.items) {
                const sexItem = formConfig.items[4]
                if (sexItem && sexItem.itemRender) {
                  sexItem.itemRender.options = sexList
                }
              }
            })

            return {
              xGrid,
              gridOptions
            }
          }
        }

import { ref, onMounted, watch, toRefs,computed,provide,inject  } from 'vue'

//创建hello变量
const hello = ref<string>("hello world")
//传递给子组件的变量message，值是hello变量
//这里也可以直接传递一个值，比如provide("message","hello wrold")

provide("message",hello)  
//把修改hello变量的函数，传递给子组件
 const changeProvide = (val:string)=>{
    hello.value = val
}
provide("changeProvide",changeProvide)

const injectMessage = inject("message") // injectMessage.value
//接收父组件修改message的函数changeProvide，可以在子组件修改父组件provide变量
const changeProvide = inject("changeProvide") 

const counter = ref(0)
watch(counter, (newValue, oldValue) => {
  console.log('The new counter value is: ' + counter.value)
})

 const repositories = ref([])
  const getUserRepositories = async () => {
    repositories.value = await fetchUserRepositories(props.user)
  }

  onMounted(getUserRepositories) // 在 `mounted` 时调用 `getUserRepositories`


  // 使用 `toRefs` 创建对 `props` 中的 `user` property 的响应式引用
  const { user } = toRefs(props)

  const repositories = ref([])
  const getUserRepositories = async () => {
    // 更新 `prop.user` 到 `user.value` 访问引用值
    repositories.value = await fetchUserRepositories(user.value)
  }

  onMounted(getUserRepositories)
  // 在 user prop 的响应式引用上设置一个侦听器
  watch(user, getUserRepositories)

reactive和ref选一种，toRef和toRefs选一种，不然代码会很乱


1、ref是对元数据的拷贝，修改响应式数据时不会影响之前的数据，视图会更新。
ref可用于任何类型的数据创建响应式，返回一个具有响应式状态的副本
获取数据值的时候需要加.value
不可以解构

2、reactive 用于为对象添加响应式数据。接收一个js对象作为参数，返回一个具有响应式状态的副本。
在对象属性发生变化时，模版是可以 响应更新渲染的
获取数据值的时候直接获取，不需要加.value
参数只能传入对象类型
reactive只用于创建引用类型数据的响应式。
不可以解构

3、toRef 是对元数据的引用，修改响应式数据时，元数据也会改变，但是视图不会更新，toRef修改的是对象的某个属性，
toRef是将对象中的某个值转化为响应式数据 toRef(obj,key)， toRef 是一个个手动赋值
获取数据值的时候需要加.value
toRef后的ref数据不是原始数据的拷贝，而是引用，改变结果数据的值也会同时改变原始数据
不可以解构

4、toRefs是对元数据的引用，修改响应式数据时，元数据也会改变，但是视图不会更新，toRefs修改的是整个对象
使用场景：如果想让响应式数据和原来的数据关联起来同步更新，并且不更新视图，那么就可以使用toRefs
toRefs是将整个对象转化成响应式数据 toRefs(obj)
获取数据值的时候需要加.value
toRefs后的ref数据不是原始数据的拷贝，而是引用，改变结果数据的值也会同时改变原始数据
作用其实和 toRef 类似，只不过 toRef 是一个个手动赋值，而 toRefs 是自动赋值。
可以解构

访问，在模板中不需要, 因为会自动添加.value，js代码中具体看如上情况


setup(){
        const state = reactive({
            name:"张三",
            age:20
        })
        return{
            // ...state
            ...toRefs(state)//解构赋值后数据就会失去响应式，需要用toRefs让对象拥有ref响应式属性，UI才会视图更新
        }
    }


    如果直接给响应的引用数据赋值，数据会变化但是ui不会更新
    let dataObj = reactive({
      trade_url:'',
      twitter_url:'',
      telegram_url:'',
      msn_url:''
    })
    const change = ()=>{
        let obj = { 
            trade_url:'1',
            twitter_url:'2',
            telegram_url:'3',
            msn_url:'4'
        }
        dataObj = obj;

        console.log(dataObj); //数据都变化了，视图不会更新，没有检测到数据的变化    

        解决：
        // Object.assign(dataObj,obj)  
        //这样会检测到数据的变化更新ui,assign方法类似于对对象的每个属性赋值，此时vue会检测到变化,等效于下方的操作。
        // dataObj.trade_url = obj.trade_url;
        // dataObj.twitter_url = obj.twitter_url;
        // dataObj.telegram_url = obj.telegram_url;
        // dataObj.msn_url = obj.msn_url;

    　　//如果是数组的话直接=也是不会更新。可使用concat，或者其他数组方法 push splice 

 setup(props, { attrs, slots, emit, expose }) {
    ...
  }




  查询事件 重置事件 内置的 如果加个导出按钮到配置里面
  新增事件内置 给某个字段初始值
  如何用插槽配置ant组件和事件比如： 时间  下拉全选清除，多选 


  定义子组件接收属性和emit事件

  defineProps({
  title: {
    type: String,
    default: '导入数据'
  },
  tips: {
    type: String,
    default: ''
  },
  type: {
    type: String,
    default: 'info'
  }
});

const emit = defineEmits<{
  (e: 'close', flag: boolean): void;
  (e: 'import', urlArr: any): void;
}>();