vue element ui使用笔记

element ui table中使用el-select

在column中使用slot-scope获取当前行的值,进行数据绑定。option的值同正常的数据赋值，如下图所示

element ui 添加加减号圆形按钮

参考icon图标

<el-button type="primary"  icon="el-icon-plus" circle></el-button>
<el-button type="primary"  icon="el-icon-minus" circle></el-button>

element ui form表单一行多列

ElementUI的页面布局，跟bootstrap一样，是24格栅栏形式的。因此，可以通过row和col组件，以及col组件的span属性，完成Form的布局。
可参照https://www.cnblogs.com/howyouth/p/10880509.html文档
代码:

<template>
    <div>
        <el-form :model="dengmiQueryForm" ref="dengmiQueryForm" label-width="100px" class="demo-ruleForm" size="mini">
            <el-row>
                <el-col span="8">
                    <el-form-item label="谜面">
                        <el-input v-model="dengmiQueryForm.mimian"></el-input>
                    </el-form-item>
                </el-col>
                <el-col span="8">
                    <el-form-item label="谜目">
                        <el-input v-model="dengmiQueryForm.mimu"></el-input>
                    </el-form-item>
                </el-col>
                <el-col span="8">
                    <el-form-item label="谜格">
                        <el-input v-model="dengmiQueryForm.mige"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col span="8">
                    <el-form-item label="谜底">
                        <el-input v-model="dengmiQueryForm.midi"></el-input>
                    </el-form-item>
                </el-col>
                <el-col span="8">
                    <el-form-item label="作者">
                        <el-input v-model="dengmiQueryForm.zuozhe"></el-input>
                    </el-form-item>
                </el-col>
                <el-col span="8">
                    <el-form-item label="谜底字数">
                        <el-input v-model="dengmiQueryForm.midiLength"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col>
                    <el-button type="primary" @click="submitForm" icon="el-icon-search">查询</el-button>
                    <el-button type="warning" @click="resetForm" icon="el-icon-search" plain>重置</el-button>
                </el-col>
            </el-row>
        </el-form>
    </div>
</template>

<script>
    export default {
        name: "dengmiQuery",
        data() {
            return {
                dengmiQueryForm: {
                    mimian:'',
                    mimu:'',
                    mige:'',
                    midi:'',
                    zuozhe:'',
                    midiLength:''
                }
            };
        },
        methods: {
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        alert('submit!');
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            }
        }
    }
</script>

<style scoped>
   
</style>

效果图:

element ui 列表数据,根据后端传过来的值,展示不同的文字

vue 从一个页面跳转到另外一个页面,并携带参数

在跳转方法中,通过router将参数传递并跳转

this.$router.push({
  // path 中的url 最前面加 / 代表是根目录下，不加则是子路由
  // 通过path + query 的组合传递参数
  path: '/detail',
  query: {
    id: 1
  }
})

对应到跳转的页面,使用query接收

const id = this.$route.query.id;

vue下拉选,多选

添加"multiple"属性,详见文档https://cn.vuejs.org/v2/guide/forms.html#%E9%80%89%E6%8B%A9%E6%A1%86

element ui 下拉选,添加搜索功能

添加filterable属性,即可在本地搜索
如果要通过接口搜索,可以使用filterMethod,调用相应的方法

element ui 表格嵌套

嵌套使用slot-scope,如table中,嵌套input,可以这样写

<el-table-column
  prop="registryWeight"
  label="权重"
  align="center"
  width="200">
  <template slot-scope="scope">
    <el-input v-if="scope.row.registryWeight" v-model="scope.row.registryWeight" placeholder="权重"></el-input>
  </template>
</el-table-column>

其他嵌套也一样,如嵌套span

<el-table-column
  prop="publish_status"
  label="状态"
  width="80">
  <template slot-scope="scope">
    <span v-if="scope.row.publishStatus === 1">已发布</span>
    <span v-if="scope.row.publishStatus === 0">未发布</span>
  </template>
</el-table-column>

element ui 自定义组件

1. 创建对应的组
   这个和其他页面一样开发,把自己想要的功能放入
   
2. 导入自定义组件
   若只是某个页面需要,则局部导入,如图
   
3. 使用组件