ColumnSetting

Control the sorting and display of columns in the table, use whit Table or Crud

Use

Basic Use

Bind data through v-model, click the multi-select box to togglen display and hide, and drag it directly to togglen sort

[ { "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>

Slots

Configurable trigger button by default slots

[ { "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>

Use with Table

Use with Table or Crud to play its role

<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>

Use with Crud

It is recommended to use the action slot, bind columns or table-columns of Crud

<template>
  <pro-crud
    v-model="form"
    v-model:search="serachForm"
    :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 serachForm = 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', serachForm.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,
      serachForm,
      columns,
      data,
      detail,
      beforeOpen,
      search,
      submit,
      deleteRow,
    }
  },
})
</script>

Tip

If ColumnSetting is directly bind columns of Crud, the sort change will affect the Form and the Search. avoid this problem by bind table-columns

How to trigger

Use the attribute trigger. By default, it is hover. support hover click contextmenu

<template>
  <pro-crud
    v-model="form"
    v-model:search="serachForm"
    :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 serachForm = 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', serachForm.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,
      serachForm,
      data,
      columns,
      tableColumns,
      search,
      submit,
      deleteRow,
    }
  },
})
</script>

Grouping table head

Supports operations on grouping table head, and columns can be dragged into or out of the grouping table head

<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>

Props

NameDescriptionTypeOptionsDefault
v-modelbinding value of columnsarray--
sizebutton sizestringlarge / default /small-
placementplacement of pop menustringtop / top-start / top-end / bottom / bottom-start / bottom-endbottom-end
triggerhow to triggerstringhover / click / contextmenuhover
empty-texttext displayed when data is voidstring--
render-after-expandwhether to render child nodes only after a parent node is expanded for the first timeboolean-true
highlight-currentwhether current node is highlightedboolean-false
default-expand-allwhether to expand all nodes by defaultboolean-false
expand-on-click-nodewhether to expand or collapse node when clicking on the node, if false, then expand or collapse node only when clicking on the arrow icon.boolean-true
check-on-click-nodewhether to check or uncheck node when clicking on the node, if false, the node can only be checked or unchecked by clicking on the checkbox.boolean-false
auto-expand-parentwhether to expand father node when a child node is expandedboolean-true
filter-node-methodthis function will be executed on each node when use filter method. if return false, tree node will be hidden.Function(value, data, node)--
accordionwhether only one node among the same level can be expanded at one timeboolean-false
indenthorizontal indentation of nodes in adjacent levels in pixelsnumber-16
iconcustome tree node icon componentstring / Component--
allow-dragthis function will be executed before dragging a node. If false is returned, the node can not be draggedFunction(node)--
allow-dropthis function will be executed before the dragging node is dropped. If false is returned, the dragging node can not be dropped at the target node. type has three possible values: ‘prev’ (inserting the dragging node before the target node), ‘inner’ (inserting the dragging node to the target node) and ‘next’ (inserting the dragging node after the target node)Function(draggingNode, dropNode, type)--

Slots

NameDescription
defaultcustom the trigger button, parameters { size }