Element Plus

基于 Vue 3，面向设计师和开发者的组件库

目录

Element Plus

效果

一、介绍

 1、官方文档

2、官方示例

 二、准备工作

1、安装依赖包

         1）element-plus

        2） vuedraggable

        3）sass

2、示例版本 

三、使用步骤

1、element-plus自动导入

Vite

2、子组件（SetCol.vue）单页面导入并使用vuedraggable

3、父组件（TableCustomCol.vue）引用并使用子组件（SetCol.vue）

四、完整示例

1、SetCol.vue

2、TableCustomCol.vue

  欢迎扫描下方二维码关注VX公众号

效果

一、介绍

 1、官方文档

一个 Vue 3 UI 框架 | Element Plus

一个 Vue 3 UI 框架 | Element PlusA Vue 3 based component library for designers and developershttps://element-plus.org/zh-CN/

2、官方示例

​

 二、准备工作

1、安装依赖包

         1）element-plus

# NPM
$ npm install element-plus --save

# Yarn
$ yarn add element-plus

# pnpm
$ pnpm install element-plus

        2） vuedraggable

npm install vuedraggable --save

        3）sass

npm install sass --save

2、示例版本 

"element-plus": "^2.4.4",
"vuedraggable": "^4.1.0",
"sass": "^1.69.5",

三、使用步骤

1、element-plus自动导入

首先你需要安装unplugin-vue-components 和 unplugin-auto-import这两款插件

npm install -D unplugin-vue-components unplugin-auto-import

然后把下列代码插入到你的 Vite 或 Webpack 的配置文件中

Vite

// vite.config.ts
import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

export default defineConfig({
  // ...
  plugins: [
    // ...
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
})

注：完整引入 / 按需导入 / 手动导入等方式请参照下方链接配置

快速开始 | Element Plus

2、子组件（SetCol.vue）单页面导入并使用vuedraggable

<template>
  <draggable
    v-model="cols"
    animation="300"
    @end="onEnd"
    item-key="id"
  >
    <template #item="{ element, index }" :key="index" >
      <div class="item" >
        <el-checkbox
          :label="element.label"
          v-model="element.ifcolumn"
          @change="onChangeChecked"
        >{{ element.label }}</el-checkbox
      >
      </div>
    </template>
  </draggable>
</template>

<script setup>
import draggable from "vuedraggable";

...详见完整示例
</script>

3、父组件（TableCustomCol.vue）引用并使用子组件（SetCol.vue）

<template>
  <SetCol
    :columnList="columnList"
    @getlistValue="getlistValue"
  /> 
<script setup lang="ts">
import SetCol from "./SetCol.vue";

...详见完整示例
</script> 

四、完整示例

1、SetCol.vue

<template>
  <div>
		<el-popover placement="bottom" trigger="click" width="200">
      <template #reference>
				<el-button>
					<el-icon><Setting /></el-icon>
				</el-button>
			</template>
      <div class="c-head">
        <div>数据列</div>
          <el-checkbox
            v-model="checkAll"
            :indeterminate="isIndeterminate"
            @change="handleCheckAllChange"
            >{{ columnSelectTitle }}</el-checkbox
          >
        </div>
        <div class="c-content">
          <draggable
            v-model="cols"
            animation="300"
            @end="onEnd"
            item-key="id"
          >
            <template #item="{ element, index }" :key="index" >
              <div class="item" >
                <el-checkbox
                  :label="element.label"
                  v-model="element.ifcolumn"
                  @change="onChangeChecked"
                  >{{ element.label }}</el-checkbox
                >
              </div>
            </template>
          </draggable>
        </div>
    </el-popover>
  </div>
</template>

<script setup lang="ts">
import { computed, ref, watch } from "vue";
import draggable from "vuedraggable";

// 接收父组件传来的值
const props = defineProps({
  columnList: Array,
	tableCols: {
		type: Array,
		default: () => [],
	},
});

// 向父组件传去的值
const emits = defineEmits(["getlistValue"])

// 定义变量
const checkAll = ref(true);
const isIndeterminate = ref(false);
const cols = ref(props.columnList) ;

// 监听父组件传来的值
watch(
	() => props.columnList,
	(newVal, oldValue) => {
		cols.value = newVal;
	},
	{ deep: true, immediate: true }
);

// 计算属性动态显示值
const columnSelectTitle = computed(() => {
	return checkAll.value ? '取消全选' : '全选';
});

// 全选按钮
const handleCheckAllChange = (val) => {
  cols.value.forEach((e) => e.ifcolumn = val);

  val ? isIndeterminate.value = false : isIndeterminate.value = true;
  emits("getlistValue",cols.value)
};

// 判断是否全选
const onChangeChecked = () => {
  const flag = cols.value.every(item => item.ifcolumn);

  flag ? checkAll.value = true : checkAll.value = false;
  isIndeterminate.value = !checkAll.value;
  emits("getlistValue", cols.value)
};

// 结束拖拽
const onEnd = () => {
  emits("getlistValue", cols.value);
};

</script>

<style scoped lang="scss">
.c-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #FAFAFA;
}

.c-content {
  width: 150px;
  .item {
    display: flex;
    align-items: center;
  }
}

</style>

2、TableCustomCol.vue

<template>
  <div class="content">
    <!-- 数据列设置 -->
    <div class="settings">
      <SetCol
        :columnList="columnList"
        @getlistValue="getlistValue"
      />  
    </div>

    <!--表格-->
    <el-table
      stripe
      :data="list"
      class="table"
      :cell-style="{ textAlign: 'center' }"
      :header-cell-style="{
        'text-align': 'center',
        background: '#F5F7FA',
        'font-size': '15px',
      }"
    >
      <el-table-column type="index" label="序号" width="80px" />
      <template v-for="(item,index) in columnList" :key="index"   >
        <el-table-column v-if="item.ifcolumn" :label="item.label" :prop="item.prop" />
      </template>
      <el-table-column fixed="right" label="操作">
        <template #default="scope">
          <el-button
            link
            type="primary"
            size="small"
            >详情</el-button
          >
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import SetCol from "./SetCol.vue";

// 定义变量
const list = [
  {
    name: "张三",
    phone:'13125632456'
  },
];

// 表格列设置内容
const columnList = ref([
  {
    prop: 'name',
    label: '姓名',
    ifcolumn: true,
  },
  {
    prop: 'phone',
    label: '手机号',
    ifcolumn: true,
  }
])

// 接收子组件传来的值，表格列设置赋值
const getlistValue = (val) => {  
  columnList.value = val;
}
</script>

<style scoped lang="scss">
.content {
  .settings {
    text-align: right;
    color: #999;
    cursor: pointer;
    margin-bottom: 0.5rem;
  }
  .table {
    width: 100%
  }
}

</style>

  欢迎扫描下方二维码关注VX公众号