ColumnSetting

控制表格内部列的排序及显隐,配合 Table 或 Crud 使用

使用

配合 Table

通过 v-model 绑定数据,默认点击多选框切换列的显隐,直接拖动实现切换排序

<template>
  <pro-column-setting
    v-model="columns"
    style="float: right; margin-bottom: 10px"
  />
  <pro-table
    :data="data"
    :columns="columns"
  />
</template>

<script>
import { defineComponent, ref } from 'vue'

export default defineComponent({
  setup() {
    const columns = ref([
      {
        label: 'Date',
        prop: 'date',
      },
      {
        label: 'Name',
        prop: 'name',
      },
      {
        label: 'Address',
        prop: 'address',
      },
    ])
    const data = ref([
      {
        date: '2016-05-03',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
      },
      {
        date: '2016-05-02',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
      },
      {
        date: '2016-05-04',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
      },
      {
        date: '2016-05-01',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
      },
    ])

    return {
      data,
      columns,
    }
  },
})
</script>
显示代码

配合 Crud

推荐通过 action 插槽使用,可以绑定 Crudcolumnstable-columns

<template>
  <pro-crud
    v-model="form"
    v-model:search="serachForm"
    :columns="columns"
    :menu="{ label: 'Operations' }"
    :data="data"
    @search="search"
    @submit="submit"
    @delete="deleteRow"
  >
    <template #action>
      <pro-column-setting v-model="columns" />
    </template>
  </pro-crud>
</template>

<script>
import { defineComponent, ref } from 'vue'

export default defineComponent({
  setup() {
    const form = ref({})
    const serachForm = ref({})
    const columns = ref([
      {
        label: 'Date',
        prop: 'date',
        component: 'el-input',
        add: true,
        edit: true,
        search: true,
      },
      {
        label: 'Name',
        prop: 'name',
        component: 'el-input',
        add: true,
        search: true,
      },
      {
        label: 'Address',
        prop: 'address',
        component: 'el-input',
        add: true,
        edit: true,
      },
    ])
    const data = ref([
      {
        date: '2016-05-03',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
      },
      {
        date: '2016-05-02',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
      },
      {
        date: '2016-05-04',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
      },
      {
        date: '2016-05-01',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
      },
    ])

    const search = (done, isValid, invalidFields) => {
      console.log('search', serachForm.value, isValid, invalidFields)
      setTimeout(() => {
        done()
      }, 1000)
    }

    const submit = (close, done, formType, isValid, invalidFields) => {
      console.log('submit', form.value, formType, isValid, invalidFields)
      setTimeout(() => {
        isValid ? close() : done()
      }, 1000)
    }

    const deleteRow = (row) => {
      console.log('deleteRow', row)
    }

    return {
      form,
      serachForm,
      data,
      columns,
      search,
      submit,
      deleteRow,
    }
  },
})
</script>
显示代码

提示

如果 ColumnSetting 直接绑定 Crudcolumns,排序变动会影响表单组件和搜索组件。通过绑定 table-columns 可以单独绑定表格进而避免影响表单组件和搜索组件。

点击触发弹窗

通过 trigger 控制触发方式,支持 hover click contextmenu-鼠标右键

<template>
  <pro-crud
    v-model="form"
    v-model:search="serachForm"
    :columns="columns"
    :table-columns="tableColumns"
    :menu="{ label: 'Operations' }"
    :data="data"
    @search="search"
    @submit="submit"
    @delete="deleteRow"
  >
    <template #action>
      <pro-column-setting
        v-model="tableColumns"
        trigger="click"
      />
    </template>
  </pro-crud>
</template>

<script>
import { defineComponent, ref } from 'vue'

export default defineComponent({
  setup() {
    const form = ref({})
    const serachForm = ref({})
    const columns = ref([
      {
        label: 'Date',
        prop: 'date',
        component: 'el-input',
        add: true,
        edit: true,
        search: true,
      },
      {
        label: 'Name',
        prop: 'name',
        component: 'el-input',
        add: true,
        search: true,
      },
      {
        label: 'Address',
        prop: 'address',
        component: 'el-input',
        add: true,
        edit: true,
      },
    ])
    const tableColumns = ref(JSON.parse(JSON.stringify(columns.value)))
    const data = ref([
      {
        date: '2016-05-03',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
      },
      {
        date: '2016-05-02',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
      },
      {
        date: '2016-05-04',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
      },
      {
        date: '2016-05-01',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
      },
    ])

    const search = (done, isValid, invalidFields) => {
      console.log('search', serachForm.value, isValid, invalidFields)
      setTimeout(() => {
        done()
      }, 1000)
    }

    const submit = (close, done, formType, isValid, invalidFields) => {
      console.log('submit', form.value, formType, isValid, invalidFields)
      setTimeout(() => {
        isValid ? close() : done()
      }, 1000)
    }

    const deleteRow = (row) => {
      console.log('deleteRow', row)
    }

    return {
      form,
      serachForm,
      data,
      columns,
      tableColumns,
      search,
      submit,
      deleteRow,
    }
  },
})
</script>
显示代码

支持多级表头

支持对多级表头的操作,可以将列拖入或拖出子表头

<template>
  <pro-column-setting
    v-model="columns"
    default-expand-all
    style="float: right; margin-bottom: 10px"
  />
  <pro-table
    :data="data"
    :columns="columns"
  />
</template>

<script>
import { defineComponent, ref } from 'vue'

export default defineComponent({
  setup() {
    const columns = ref([
      {
        label: 'Date',
        prop: 'date',
      },
      {
        label: 'User',
        prop: 'user',
        children: [
          {
            label: 'Name',
            prop: 'name',
          },
          {
            label: 'Address',
            prop: 'address',
          },
        ],
      },
    ])
    const data = ref([
      {
        date: '2016-05-03',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
      },
      {
        date: '2016-05-02',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
      },
      {
        date: '2016-05-04',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
      },
      {
        date: '2016-05-01',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
      },
    ])

    return {
      data,
      columns,
    }
  },
})
</script>
显示代码

配置

参数说明类型可选值默认值
v-model绑定 columnsarray--
size按钮尺寸stringlarge / default /small-
placement菜单弹出位置stringtop / top-start / top-end / bottom / bottom-start / bottom-endbottom-end
trigger触发下拉的行为stringhover / click / contextmenuhover
empty-text内容为空的时候展示的文本string--
render-after-expand是否在第一次展开某个树节点后才渲染其子节点boolean-true
highlight-current是否高亮当前选中节点boolean-false
default-expand-all是否默认展开所有节点boolean-false
expand-on-click-node是否在点击节点的时候展开或者收缩节点boolean-true
check-on-click-node是否在点击节点的时候选中节点boolean-false
auto-expand-parent展开子节点的时候是否自动展开父节点boolean-true
filter-node-method对树节点进行筛选时执行的方法,返回 booleanFunction(value, data, node)--
accordion是否每次只打开一个同级树节点展开boolean-false
indent相邻级节点间的水平缩进,单位为像素number-16
icon-class自定义树节点的图标string--
allow-drag判断节点能否被拖拽Function(node)--
allow-drop拖拽时判定目标节点能否被放置。type 参数有三种情况:previnnernext,分别表示放置在目标节点前、插入至目标节点和放置在目标节点后Function(draggingNode, dropNode, type)--