element-ui簡單筆記(下)

element-ui的簡單筆記

element-ui簡單筆記(上)
element-ui簡單筆記(中)

關注一下公衆號：內有相關文章！！

九、消息提示

警告提示

1.1 創建警告提示

<el-alert title="成功信息提示" :closable="false" type="success">
  <div slot>我是輔助信息</div>
</el-alert>
<el-alert title="成功信息提示" type="info"></el-alert>
<el-alert title="成功信息提示" type="warning"></el-alert>
<el-alert title="成功信息提示" type="error"></el-alert>

1.2屬性的使用

<el-alert title="成功信息提示" effect="dark" :show-icon="true" center :closable="false" type="success">
  <div slot>我是輔助信息</div>
</el-alert>

9.2 Message消息提示

2.1 創建組件

• 注意:這個組件的創建無須在頁面中書寫任何標籤,他是一個js插件,在需要展示消息提示的位置直接調用提供的js插件方法即可

# 1.創建最簡單的消息
	this.$message('這是一個消息提示!!')

# 2.自定義消息內容
	this.$message({
    message: h('p', null, [
      h('span', null, '訂單創建成功,您的訂單編號爲: '),
      h('i', { style: 'color: teal' }, '87')
    ])
  });

# 3.不同主題的消息提示
	 this.$message({
     message:'這是信息提示',
     type:"success",
   })
		//主題樣式:  success  info  warning  error

# 4.屬性使用
	this.$message({
    message:'這是信息提示',
    type:"success",
    showClose:true,
    center:true,
    iconClass:'el-icon-user-solid',
    duration:0
  })
# 5.方法的使用
	this.$message.closeAll();

十、table表格組件

1.組件的創建

<el-table :data="tableData">
  <el-table-column prop="id" label="編號"></el-table-column>
  <el-table-column prop="name" label="姓名"></el-table-column>
  <el-table-column prop="age" label="年齡"></el-table-column>
  <el-table-column prop="email" label="郵箱"></el-table-column>
</el-table>
<script>
    export default {
        name: "Tables",
        data(){
            return {
                tableData:[
                    {id:21,name:"小陳",age:23,email:"[email protected]"},
                    {id:22,name:"小張",age:25,email:"[email protected]"},
                ]
            }
        }
    }
</script>

2.表格中列屬性

• el-table-column屬性

<el-table-column prop="id" :resizable="false" header-align="left" align="center" fixed="left" width="200px;" label="編號"></el-table-column>
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="age" :sort-method="sorts" sortable label="年齡"></el-table-column>
<el-table-column prop="email" label="郵箱"></el-table-column>
<el-table-column prop="dept.name" :formatter="showDept" label="部門"></el-table-column>
<script>
    export default {
        name: "Tables",
        data() {
            return {
                tableData: [
                    {
                        id: 21, name: "小陳", age: 23, email: "[email protected]",
                        dept: {id: 1, name: "研發部"}
                    },
                    {
                        id: 22, name: "小張", age: 25, email: "[email protected]",
                        dept: {id: 1, name: "小賣部"}
                    },
                    {
                        id: 23, name: "小李", age: 25, email: "[email protected]",
                        dept:{}
                    },
                ]
            }
        },
        methods: {
            sorts(a, b) {
                return a.age - b.age;
            },
            showDept(row, column, cellValue, index){
                console.log(row);
                console.log(column);
                console.log(cellValue);
                console.log(index);
                if(cellValue){
                    return cellValue
                }
                return "暫無部門";
            }
        }
    }
</script>

3.表格屬性

<el-table :data="tableData" empty-text="暫無數據" :row-class-name="showCss" highlight-current-row :show-header="true" :fit="true"
              size="mini" :height="600" border>

</el-table>
<script>
  .....
	methods: {
            showCss({row, rowIndex}) {
                if (rowIndex % 2 == 0) {
                    return "warning-row";
                }
                return "success-row";
            }
        }
 </script>

4.組件事件使用

<el-table @事件名="事件處理函數名"><el-table>

<script>
    export default {
        name: "Tables",
        data() {
            //....
        },
        methods: {
            //...事件處理函數
            selectRow(selection, row){
                console.log(selection);
                console.log(row);
            }
        }
    }
</script>

5.組件方法的使用

<el-table  ref="mytable">........</el-table>
//調用方法
	this.$refs.mytable.方法名  

6.表格中定義操作列

<el-table>
  ....
	 <el-table-column label="操作">
      <template slot-scope="scope">
        <el-button
          size="mini"
          @click="handleEdit(scope.$index, scope.row)">編輯</el-button>
        <el-button
          size="mini"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)">刪除</el-button>
      </template>
    </el-table-column>
</el-table>
<script>
    export default {
        name: "Tables",
        data() {
            .....
        },
        methods: {
						//用來處理編輯和刪除的事件函數
            handleEdit(index,row){
                console.log(index);
                console.log(row);
            },
            handleDelete(index,row){
                console.log(index);
                console.log(row);
            }
        }
    }
</script>

---

7.自定義表頭

 <el-table :data="tableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))" >
   .....
   <!--展示搜索和操作-->
   <el-table-column>
        <template slot="header" slot-scope="scope">
          <el-input
            v-model="search"
            size="mini"
            placeholder="輸入關鍵字搜索"/>
        </template>
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="handleEdit(scope.$index, scope.row)">編輯</el-button>
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)">刪除</el-button>
        </template>
      </el-table-column>
</el-table>
<script>
    export default {
        name: "Tables",
        data() {
            return {
                tableData: [
                    {
                        id: 21, name: "小陳", age: 23, email: "[email protected]",
                        dept: {id: 1, name: "研發部"}
                    },
                    {
                        id: 22, name: "小張", age: 25, email: "[email protected]",
                        dept: {id: 1, name: "小賣部"}
                    },
                    {
                        id: 23, name: "小李", age: 25, email: "[email protected]",
                        dept: {}
                    },
                    {
                        id: 24, name: "小四", age: 25, email: "[email protected]",
                        dept: {}
                    },
                ],
                search: ''
            }
        },
        methods: {
            sorts(a, b) {
                return a.age - b.age;
            },
            showDept(row, column, cellValue, index) {
                if (cellValue) {
                    return cellValue
                }
                return "暫無部門";
            },
            showCss({row, rowIndex}) {
                if (rowIndex % 2 == 0) {
                    return "warning-row";
                }
                return "success-row";
            },
            selectRow(selection, row){
                console.log(selection);
                console.log(row);
            },
            clearSelect(){
                this.$refs.mytable.clearSelection();
            },
            handleEdit(index,row){
                console.log(index);
                console.log(row);
            },
            handleDelete(index,row){
                console.log(index);
                console.log(row);
            }
        }
    }
</script>

element-ui的組件太多了，我也就是把我最近練習的給記錄下來，其餘的這裏就不再一一介紹了，大家有需要的可以看文檔，自行去測試。謝謝！！！