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

Name	Description	Type	Options	Default
v-model	binding value of `columns`	array	-	-
size	button size	string	large / default /small	-
placement	placement of pop menu	string	top / top-start / top-end / bottom / bottom-start / bottom-end	bottom-end
trigger	how to trigger	string	hover / click / contextmenu	hover
empty-text	text displayed when data is void	string	-	-
render-after-expand	whether to render child nodes only after a parent node is expanded for the first time	boolean	-	true
highlight-current	whether current node is highlighted	boolean	-	false
default-expand-all	whether to expand all nodes by default	boolean	-	false
expand-on-click-node	whether 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-node	whether 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-parent	whether to expand father node when a child node is expanded	boolean	-	true
filter-node-method	this function will be executed on each node when use filter method. if return `false`, tree node will be hidden.	Function(value, data, node)	-	-
accordion	whether only one node among the same level can be expanded at one time	boolean	-	false
indent	horizontal indentation of nodes in adjacent levels in pixels	number	-	16
icon	custome tree node icon component	string / Component	-	-
allow-drag	this function will be executed before dragging a node. If `false` is returned, the node can not be dragged	Function(node)	-	-
allow-drop	this 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

Name	Description
default	custom the trigger button, parameters { size }

ColumnSetting #

Use #

Basic Use #

Slots #

Use with Table #

Use with Crud #

How to trigger #

Grouping table head #

Props #

Slots #

ColumnSetting

Use

Basic Use

Slots

Use with Table

Use with Crud

How to trigger

Grouping table head

Props

Slots