Vue（五）- element ui库安装和使用过程中遇到的坑

1. 安装和引入

npm i element-ui –S

//vue_demo\src\main.js中引入文件
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

2. UI组件使用遇到的坑点

Layout布局

1. :span=“24”，为啥赋值24，还用：

<el-col :span="24"><div class="grid-content bg-purple-dark">div>el-col>

解答： 只要传入的不是字符串，都用：，否则会被当作字符串处理。
这个在props的规则校验中是深有体会的。

2. col 24栅格，但是col间的padding设置始终无效

<el-row :gutter="20">
  <el-col :span="6"><div>div>el-col>
  <el-col :span="6"><div>div>el-col>
  <el-col :span="6"><div>div>el-col>
  <el-col :span="6"><div>div>el-col>
el-row>

解答：div 必须，加入的时候，css设置中出现 element.type。
可以用下面强制改掉默认的padding-left: 10px;

.el-col {
padding-right: 5px !important;
}

对话框

1. 点击空白处无处理close-on-click-modal
2. Visible.sync 父子组件同步，即点击X—》关闭dialog。
   如果去除sync,可将代码改为下面，达到一样的效果。

handleClose(done) {
            this.$confirm('确认关闭？')
            .then(_ => {
                this.dialogVisible = false;
                done();
            })
            .catch(_ => {});
      }

enter无效，通过自定义指令实现Focus的实现

1. 画面
   

2. 需求细化
   （1）输入name和年龄，点击“追加”或者enter，往下表加入数据
   （2）默认焦点在“过滤”上

3. 遇到的问题
   （1）@keyup.enter=“” 一直无效，原来element ui中需要这么写@keyup.enter.native=""
   （2）通过自定义指令focus实现焦点设置时，focus无效。
   原因1： 自定义指令要写在inserted钩子函数中
   原因2：el不是目标元素，找准目标元素，设置才会有效果
   （3）初次使用方法作为 el-table :data的值，用这种方式实现检索

4. 完整代码

<template>
    <div style="width:80%;margin: 0 auto">
        <div style="padding-top:20px">
            <el-divider></el-divider>
        </div>
        <el-row :gutter="20">
            <el-col :span="5"><el-input placeholder="请输入姓名" v-model="name" @keyup.enter.native="addUser($event)"></el-input></el-col>
            <el-col :span="4"><el-input-number v-model="age" :min="1" :max="100"></el-input-number></el-col>
            <el-col :span="6"><el-button type="primary" :disabled="name.length<=0" @click.stop="addUser">追加</el-button></el-col>
            <el-col :span="6"><el-input placeholder="请输入过滤项" v-model="search" v-focus></el-input></el-col>
        </el-row>
        <el-table :data="getUserList()" style="width: 100%" border highlight-current-row>
            <el-table-column prop="id" label="编号" width="100px"></el-table-column>
            <el-table-column prop="name" label="姓名" width="375px"></el-table-column>
            <el-table-column prop="age" label="年龄" width="475px"></el-table-column>
            <el-table-column label="操作" width="433px">
                <template slot-scope="scope">
                    <el-dialog title="确认删除" width="30%" :visible="dialogVisible">
                        <span>确认删除数据:{{dID}}</span>
                         <span slot="footer" class="dialog-footer">
                            <el-button @click="cancel">取 消</el-button>
                            <el-button type="primary" @click="confirm">确 定</el-button>
                        </span>
                    </el-dialog>
                    <el-button @click.prevent="deleteRow(scope.row.id)" type="text" size="small">移除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>
<script>
export default {
    name: 'userRegister2',
    data() {
        return {
            name: '', //姓名框
            age: 1, //年龄框
            search: '', //检索框
            maxID: 0, //当前表格使用到的最大的ID
            userList: [], //user表格数据
            dID: 0,
            dialogVisible: false //删除数据弹出的确认框显示与否
        }
    },
    methods: {
        //user表格数据的获取方法
        getUserList() {
            if(this.search === '') {
                return this.userList;
            }
            return this.userList.filter(item => {
                return item.name.includes(this.search) || (new String(item.age)).includes(this.search);
            })
        },
        //追加用户
        addUser(e) {
            //enter键，name为空的话，不做任何处理
            if(e.key === "Enter" && this.name === ""){
                return;
            }
            this.getMaxID();
            this.userList.push({
                id: this.maxID + 1,
                name: this.name,
                age: this.age
            });
            this.name = '';
            this.age = 1;
            this.getUserList();
        },
        //“移除”的响应事件
        deleteRow(dID) {
            this.dialogVisible = true;
            this.dID = dID;
        },
        //删除数据
        delete() {
            return this.userList.some((item, index) => {
                if(this.dID === item.id){
                    this.userList.splice(index, 1);
                    return;
                }
            })
        },
        //获取表格最大的id
        getMaxID() {
            var ids = [];
            if(this.userList.length === 0) {
                this.maxID = 0;
                return;
            }
            this.userList.forEach(item => {
                ids.push(item.id);
            })
            this.maxID = ids.reverse()[0];
        },
        //弹框的cancel
        cancel() {
            this.dialogVisible = false;
        },
        //弹框的删除
        confirm() {
            this.dialogVisible = false;
            this.delete();
        }
    },
    directives: {
        focus: {
            inserted: function(el) {
                el.children[0].focus();
            }
        }
    }
}
</script>

<style scoped>
.el-table {
    margin-top: 10px;
}
</style>