ElementUI 开发日志

本文主要记录使用 ElementUI 的注意点。

安装

https://unpkg.com/browse/element-ui@2.15.2/README.md

Element will stay with Vue 2.x

For Vue 3.0, we recommend using [Element Plus](https://github.com/element-plus/element-plus) from the same team

使用 cdn 方式引用 elementUI ，需要先引用 vue.js 。不然会报错 Cannot read property 'prototype' of undefined 。

    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <!-- Vue.js v2.6.14 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>

Switch 开关

问题：状态不会改变

原因：:active-value="0" ，:inactive-value="1" 前面缺冒号。另外还要注意绑定值的类型，是数字，还是字符串，前端写的和后端传来的值类型要保持一致。

<el-table-column prop="status" label="状态">

        <template slot-scope="scope">

          <!-- 状态（0-有效，1-无效） -->

          <el-switch

                v-model="scope.row.status"

                :active-value="0"

                :inactive-value="1"

                @change="updateNews(scope.row)"

          />

        </template>

</el-table-column>

Select 选择器

问题：设置了默认值 value，绑定值不显示名称 label，显示 value。

原因：还是值类型问题，value 重点区分字符串和数字。

<el-form-item label="社区类型:">

          <el-select v-model="searchForm.communityType" placeholder="请选择">

                  <el-option

                    v-for="item in communityTypeOptions"

                    :key="item.value"

                    :label="item.label"

                    :value="item.value"

                  />

          </el-select>

</el-form-item>

 

communityTypeOptions: [

        {

          value: 0,

          label: '话题社区'

        }, {

          value: 1,

          label: '资讯社区'

        }

],

searchForm: {

        name: ' ',

        communityType: ' '

},

Checkbox 多选框 获取选中项（数组）

问题：想要获取 id 数组，拿到的是 name 数组。

原因：数组中元素绑定的是 label，要把 id 绑定在 label 上，名称的显示，在 el-checkbox 标签中间用 花括号 语法显示。

<el-form-item label="选择标签：" prop="labelIds">

      <el-checkbox-group v-model="newsForm.labelIds">

              <el-checkbox v-for="item in newsTagOptions" :key="item.id" :label="item.id" name="labelIds">{{ item.name }}</el-checkbox>

      </el-checkbox-group>

</el-form-item>

Checkbox 多选框 动态赋值

先获取绑定的标签，再获取全部的标签，然后页面渲染。

fetchData(id) {

      fetchArticle({ 'id': id }).then(response => {

        this.newsForm = response.data.info

        // 绑定的标签

        const labelArry = response.data.info.label.split(',')

        // 解决动态赋值 checkbox 点击无效

        this.$set(this.newsForm, 'labelIds', labelArry)

      }).catch(err => {

        console.log(err)

      })

 },

 

// 获取全部标签

    async getNewsTag() {

      const data = {

        'groupId': this.newsForm.informationGroup

      }

      const res = await getNewsTag(data)

      this.newsTagOptions = res.data

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

        this.$message({

          message: '该分组下暂无标签，需要管理员去创建哦！',

          type: 'warning'

        })

      }

    },