<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<title>Document</title>
</head>
<body>
<div id="app">
<el-divider content-position="left">2.行内编辑：点击按钮实现左侧文本切换成输入框，可修改文本，关键字v-if/双向绑定/el-input(2)</el-divider>
<el-col :span="4">
<template v-if="flag2">{{msg2}}</template>
<el-input v-else v-model="msg2"></el-input>
</el-col>
<el-button @click="changeType2">切换成{{key2}}</el-button>
<el-col :span="2"></el-col>
<el-divider content-position="left">3.待办事项清单(todo
list):罗列代办事项，并可以通过勾选与否来修改状态及显示，关键字v-if，v-for或者el-table来实现，做法不限(5)
</el-divider>
<el-button @click="flag3=!flag3">{{flag3?'显示全部清单':'隐藏已办清单'}}</el-button>
<el-row v-for="item,index of checkedTodoList" :key="index">
<el-col :span='2'>
<el-tag v-if="item.checked" type="success">{{item.todo}}</el-tag>
<el-tag v-else>{{item.todo}}</el-tag>
</el-col>
<el-col :span='1'>
<el-checkbox v-model="item.checked" :key="item.todo"></el-checkbox><br>
</el-col>
</el-row>
<el-divider content-position="left">4.前端过滤/查询(实时)：通过文本框输入过滤条件，过滤数据源并显示在表格中关键字：computed(3)</el-divider>
<el-col :span='4'>
<el-input v-model="filterName" placeholder="请输入姓名"></el-input>
</el-col>
<el-table :data="filterUsers">
<el-table-column label="序号" type="index" width="50px"></el-table-column>
<el-table-column label="姓名" prop="name"></el-table-column>
</el-table>
<el-divider content-position="left">
5.显示样式切换（网格/清单列表）:关键字：el-switch/el-radio/el-row/el-col/el-card/el-table根据需要自行选择（5）</el-divider>
<el-radio-group v-model="radioChoose">
<el-radio :label='0'>无高亮</el-radio>
<el-radio :label='1'>男性成功</el-radio>
<el-radio :label='2'>女性危险</el-radio>
</el-radio-group>
<el-table :data="users4" :row-class-name="rowClasses">
<el-table-column type="index" label="序号" width="50px"></el-table-column>
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="sex" label="性别" :formatter="sexFormat"></el-table-column>
</el-table>
<el-switch v-model="swtichValue" active-text='日光' inactive-text='夜间'></el-switch>
<el-row v-for="item,index in users4" :key="'index'+index" :class='changeClass'>
<el-col :span='1'>{{index+1}}</el-col>
<el-col :span="2">{{item.name}}</el-col>
<el-col :span="2">{{sexFormat(item)}}</el-col>
</el-row>
<el-divider content-position="left">6.通过输入框框内内容长度显示不同的字体大小和颜色，小于5 10+绿，小于10 15+黄色，大于10
20+红色，要求实时变化，内容显示到独立位置。普通实现（5），插槽实现（8）</el-divider>
<div-com :class="className">
<el-col :span="4">
<el-input v-model="inputValue6" placeholder="请输入文本内容" @input="handleChange"></el-input>
</el-col>
</div-com>
</div>
</body>
<style>
.darkTable {
background: black;
color: white
}
.el-table .success-row {
background: #f0f9eb;
}
.el-table .warning-row{
background: rgba(255, 153, 0, 0.897);
}
.small {
color: green;
font-size: 10px;
}
.middle {
color: yellow;
font-size: 15px;
}
.larger {
color: red;
font-size: 20px;
}
</style>
</html>
<script>
let id3 = 0;
let vm = new Vue({
el: "#app",
data() {
return {
key2: '输入框',
flag2: true,
msg2: "第二题的文本内容",
todoList: [
{ id: id3++, todo: '上班打卡', checked: false },
{ id: id3++, todo: '开始码代码', checked: false },
{ id: id3++, todo: '点外卖', checked: false },
{ id: id3++, todo: '吃午餐', checked: false },
{ id: id3++, todo: '睡午觉', checked: false },
{ id: id3++, todo: '睡醒码代码', checked: false },
{ id: id3++, todo: '下班打卡', checked: false },
],
checkeds3: [],
flag3: true,
users4: [
{ name: "张三" ,sex:1},
{ name: "李四" ,sex:1},
{ name: "王五" ,sex:1},
{ name: "王晓晓" ,sex:2},
{ name: "贝雅托里斯" ,sex:2},
{ name: "斯巴鲁" ,sex:1}
],
filterName: "",
radioChoose:0,
swtichValue:true,
inputValue6: "",
className: 'small',
}
},
components: {
'div-com': {
template: `
<div><el-col :span='2'>Hello Vue.js</el-col><slot></slot></div>
`
}
},
computed: {
checkedTodoList() {
return this.flag3 ? this.todoList.filter(item => !item.checked) : this.todoList
},
filterUsers() {
return !this.filterName ? this.users4 : this.users4.filter(item => item.name.includes(this.filterName))
},
changeClass(){
return this.swtichValue?'':'darkTable'
}
},
methods: {
changeType2() {
this.flag2 = !this.flag2;
this.key2 = this.flag2 ? '输入框' : '文本'
},
handleChange(value) {
let length = value.split("").length;
if (length < 5) {
this.className = 'small'
} else if (length < 10) {
this.className = 'middle'
} else if (length < 15) {
this.className = 'larger'
}
},
rowClasses({row,rowIndex}){
let num = this.radioChoose;
if(num === row.sex){
if(num === 1){
return 'success-row';
}else{
return 'warning-row';
}
}else{
return ''
}
},
sexFormat({sex}){
if(sex === 1){
return '男'
}else{
return '女'
}
}
}
})
</script>
|