element的表格index自定义_element 实现自定义表格列

在我们开发PC端的项目使用表单时，尤其是crm系统，应该经常会遇到这样的需求， 用户需要根据设置来自定义显示列。 查了element的官方文档， 并没有此类组件， 所以手动封装了一个简单的组件， 希望能在大家开发此类需求时能够有所帮助。

效果图

具体效果图如下：

自定义显示列 (可实现拖拽进行排序，点击选中，再次点击取消选中)

按照用户已设置好的字段排序/显示/隐藏每一列

setTable组件

首先实现拖拽排序的话我们需要借助一个插件：

npm install vuedraggable -S

具体的组件代码如下， 代码内已写有详细的注释，在这里就不过多赘述了。。

setTable.vue

拖动区块调整显示顺序

{ {menu.name}}

选择显示列

class="item"

:class="{active:menu.active}"

v-for="menu of fields"

:key="menu.field"

@click="onSelect(menu)"

>{ {menu.name}}

取 消

确 定

import draggable from "vuedraggable";

import { getFields, setFields, getFieldControl } from "@/api/user";

export default {

name: "setTable",

inject: ["reload"],

props: {

types: String,

},

components: {

draggable,

},

data() {

return {

dialogVisible: false,

fields: [],//全部菜单

selected: [],//已选中菜单

};

},

watch: {

selected: {

handler(oldVal, newVal) {

if (this.fields.length === 0) {

return;

}

newVal.map((i) => {

this.fields.map((j) => {

if (i.field === j.field) {

// 如果已选中数组内已有相同字段， 则active为true。active主要用来控制全部菜单选中/未选中的样式

j.active = true;

}

});

});

},

},

},

mounted() {

//为了防止火狐浏览器拖拽的时候以新标签打开

document.body.ondrop = function (event) {

event.preventDefault();

event.stopPropagation();

};

},

methods: {

async getData() {

// 获取全部菜单数据

const { data: fields } = await getFields({

types: this.ty