Element Plus+.vue

醒啊

已于 2024-06-06 09:52:15 修改

阅读量398

点赞数 4

CC 4.0 BY-SA版权

分类专栏：笔记文章标签： ui vscode vue.js

于 2024-05-15 08:34:51 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_45279339/article/details/138889328

笔记专栏收录该内容

2 篇文章

订阅专栏

Element Plus 是一个流行的 Vue.js UI 工具包，它提供了一套可定制的组件，用于构建现代化的 Web 应用程序。

要使用Element Plus，需要具备以下条件：

Vue.js 知识: Element Plus 是为 Vue.js 框架设计的，因此您需要了解 Vue.js
的基础知识，如组件、指令、状态管理等。
前端开发经验: 具备一定的前端开发经验会有所帮助，因为您需要理解如何在项目中集成 Element
Plus，并对前端开发工具和流程有所了解。
Node.js 和 npm/yarn: 您需要在本地安装 Node.js 和 npm（或者 yarn），以便安装 Element
Plus 和其他依赖项。
开发环境: 需要一个合适的开发环境，比如编辑器（如VSCode）、浏览器和开发服务器，以便编写、测试和调试您的代码。
项目需求: 最重要的是，您需要明确您的项目需求，并确定 Element Plus 是否适合您的项目。 Element Plus
提供了丰富的组件和工具，但确保它们符合您的项目要求是很重要的。

基本特性数据绑定：通过 data 属性绑定数据源。列定义：通过 columns 属性定义表格的列，包括列的标题、字段名、格式化函数等。
分页：可以与 el-pagination 组件结合使用，实现数据的分页展示。排序：支持列的排序功能。筛选：可以对表格的列进行筛选。
行选择：支持单选或多选。行展开：可以展开或收起表格的行，展示更多的内容。自定义模板：允许自定义单元格的内容。
树形数据：支持树形结构的数据展示。

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="date" label="日期" width="180"></el-table-column>
    <el-table-column prop="name" label="姓名" width="180"></el-table-column>
    <el-table-column prop="address" label="地址"></el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          date: '2016-05-03',
          name: '小李',
          address: '武汉市洪山区青王路 1518 ',
        },
        // 更多数据...
      ],
    };
  },
};
</script>

实现一个根据boolean进行在列表数据中渲染不同的样式状态

定义了一个函数类型的回调，这个回调根据 isStop 的值返回不同颜色的圆形标记：

{
    key: 'isStop',
    colWidth: '',
    title: '是否暂停',
    type: 'function',
    isCheck: true,
    callback(d: any) {
        if(d.isStop) {
            return "<div style=' width: 5px;  border-radius: 50%;  border: 5px solid #00FF00; margin: auto'></div>"
        } else {
            return "<div style=' width: 5px;  border-radius: 50%;  border: 5px solid #FF0000; margin: auto'></div>"
        }
    }
}

在 el-table-column 的模板中，当 item.type 是 ‘function’ 时，会调用这个回调：

<template v-if="item.type === 'function'">
    <div v-html = "item.callback && item.callback(scope.row)"></div>
</template>

这意味着对于“是否暂停”这一列，单元格的内容将根据 isStop 字段的值渲染为一个绿色或红色的圆点。

代码中，el-table-column 组件通过 v-for 循环和 v-slot
模板为每一列创建了一个单元格渲染逻辑。特别是“是否暂停”这一列，使用了一个函数类型的回调来动态渲染状态标记。

父子组件之间的事件传递和数据交互实现从当前页传值给另一个页面

父组件（ParentComponent.vue）

<template>
  <div>
    <h1>父组件</h1>
    <ChildComponent @submit="handleSubmit" />
    <p>提交的数据：{{ submittedData }}</p>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      submittedData: ''
    };
  },
  methods: {
    handleSubmit(data) {
      this.submittedData = data;
      console.log('父组件接收到的数据：', data);
    }
  }
};
</script>

子组件（ChildComponent.vue）

<template>
  <div>
    <h2>子组件</h2>
    <input type="text" v-model="inputData" placeholder="输入数据" />
    <button @click="submitData">提交</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputData: ''
    };
  },
  methods: {
    submitData() {
      this.$emit('submit', this.inputData);
    }
  }
};
</script>

父组件 (ParentComponent.vue) 包含了一个子组件 ChildComponent，并且监听了子组件发出的 submit
事件。当在子组件中点击提交按钮时，子组件的 submitData 方法会被调用。 submitData 方法使用 this.$emit
触发一个 submit 事件，并将输入框中的数据作为参数传递。父组件的 handleSubmit
方法被调用，并接收到子组件传递的数据，然后将其存储在 submittedData 数据属性中，并在控制台中打印出来。
父组件的模板中显示了提交的数据，这样用户可以看到他们的输入被成功传递并处理。这个示例展示了 Vue.js
中父子组件之间如何通过事件和数据绑定进行通信。

:deep()选择器

在 Vue.js 中，:deep() 是一个用于 Scoped CSS 的特殊选择器，允许开发者在 Scoped CSS 作用域之外选择子组件的元素。Vue.js 的 Scoped CSS 默认只应用于当前组件，防止样式污染其他组件。但有时候，我们需要针对子组件的某些元素进行样式定制，这时就需要使用 :deep() 选择器。

用法示例

假设有两个组件：ParentComponent 和 ChildComponent。ParentComponent 中包含了 ChildComponent，且需要对子组件中的元素应用特定样式。

ChildComponent.vue

<template>
  <div class="child">
    <p class="child-text">This is a child component</p>
  </div>
</template>

<script>
export default {
  name: 'ChildComponent'
};
</script>

<style scoped>
.child {
  background-color: lightblue;
}
</style>

ParentComponent.vue

<template>
  <div class="parent">
    <ChildComponent />
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  name: 'ParentComponent',
  components: {
    ChildComponent
  }
};
</script>

<style scoped>
.parent {
  border: 1px solid black;
  padding: 10px;
}

/* Using :deep() to style child component elements */
:deep(.child-text) {
  color: red;
}
</style>

ChildComponent 的 p 元素有一个类名 child-text，且默认的样式只在 ChildComponent 内部生效。
在 ParentComponent 中，通过 :deep(.child-text)，我们可以选择并修改子组件中 child-text 类元素的样式，将其文本颜色设置为红色。

注意
• 使用 :deep() 选择器时，应谨慎操作，因为它破坏了 Scoped CSS 的隔离特性，可能导致样式冲突。

时间转字符串

const d:Date = new Date()
let date: Array<string> = []
d.forEach((i: any) => {
let year = i.getFullYear()
let month = i.getMonth() + 1
let day = i.getDate()
date.push(year + '-' + (month.toString().padStart(2, '0')) + '-' + (day.toString().padStart(2, '0')))