ColumnSetting

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

使用

基础用法

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

[ { "label": "Date", "prop": "date" }, { "label": "Name", "prop": "name" }, { "label": "Address", "prop": "address" } ]

<template>
  <p>{{ columns }}</p>
  <pro-column-setting v-model="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',
      },
    ])

    return {
      columns,
    }
  },
})
</script>

插槽

通过默认插槽可以配置触发按钮

[ { "label": "Date", "prop": "date" }, { "label": "Name", "prop": "name" }, { "label": "Address", "prop": "address" } ]

<template>
  <p>{{ columns }}</p>
  <pro-column-setting v-model="columns">
    <el-button>Setting</el-button>
  </pro-column-setting>
</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',
      },
    ])

    return {
      columns,
    }
  },
})
</script>

配合 Table

配合 Table 或 Crud 使用才能够发挥其作用

<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 插槽使用，可以绑定 Crud 的 columns 和 table-columns

<template>
  <pro-crud
    v-model="form"
    v-model:search="searchForm"
    :columns="columns"
    :menu="{ label: 'Operations' }"
    :data="data"
    :detail="detail"
    :before-open="beforeOpen"
    label-width="100px"
    @search="search"
    @submit="submit"
    @delete="deleteRow"
  >
    <template #action>
      <pro-column-setting v-model="columns" />
    </template>
  </pro-crud>
</template>

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

export default defineComponent({
  setup() {
    const form = ref({})
    const searchForm = ref({})
    const detail = ref({})
    const columns = ref([
      {
        label: 'Date',
        prop: 'date',
        component: 'el-input',
        add: true,
        edit: true,
        search: true,
        detail: true,
      },
      {
        label: 'Name',
        prop: 'name',
        component: 'el-input',
        add: true,
        search: true,
        detail: true,
      },
      {
        label: 'Address',
        prop: 'address',
        component: 'el-input',
        add: true,
        edit: true,
        detail: true,
      },
    ])
    const data = ref([
      {
        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 beforeOpen = (done, type, row) => {
      if (type === 'edit') {
        form.value = row || {}
      } else if (type === 'detail') {
        detail.value = row || {}
      }
      done()
    }

    const search = (done, isValid, invalidFields) => {
      ElMessage(`search: ${isValid}`)
      console.log('search', searchForm.value, isValid, invalidFields)
      setTimeout(() => {
        done()
      }, 1000)
    }

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

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

    return {
      form,
      searchForm,
      columns,
      data,
      detail,
      beforeOpen,
      search,
      submit,
      deleteRow,
    }
  },
})
</script>

提示

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

点击触发弹窗

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

<template>
  <pro-crud
    v-model="form"
    v-model:search="searchForm"
    :columns="columns"
    :table-columns="tableColumns"
    :data="data"
    label-width="100px"
    @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'
import { ElMessage } from 'element-plus'

export default defineComponent({
  setup() {
    const form = ref({})
    const searchForm = ref({})
    const columns = ref([
      {
        label: 'Date',
        prop: 'date',
        component: 'el-input',
        search: true,
      },
      {
        label: 'Name',
        prop: 'name',
      },
      {
        label: 'Address',
        prop: 'address',
      },
    ])
    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',
      },
    ])

    const search = (done, isValid, invalidFields) => {
      ElMessage(`search: ${isValid}`)
      console.log('search', searchForm.value, isValid, invalidFields)
      setTimeout(() => {
        done()
      }, 1000)
    }

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

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

    return {
      form,
      searchForm,
      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绑定 columns 值array--
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自定义 tree 节点图标组件string /Component--
allow-drag判断节点能否被拖拽Function(node)--
allow-drop拖拽时判定目标节点能否被放置。type 参数有三种情况：prev、inner 和 next，分别表示放置在目标节点前、插入至目标节点和放置在目标节点后Function(draggingNode, dropNode, type)--

插槽

插槽名说明类型
default自定义触发按钮{ size }