2024-07-12
한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina
परिभाषा
Vue एकः अग्रभागः ढांचा अस्ति यः देशी जावास्क्रिप्ट् मध्ये DOM संचालनं समाप्तुं शक्नोति लेखनं सरलं कर्तुं च शक्नोति ।
मया पूर्वं ज्ञातं MyBatis-रूपरेखा JDBC-सङ्केत-लेखनं सरलीकर्तुं उपयुज्यते यदा Vue-इत्येतत् JavaScript-सङ्केत-लेखनं सरलीकर्तुं प्रयुक्तम् अस्ति;
Axios तथा JSON इत्यत्र व्यापकप्रकरणं योजयित्वाइत्यस्मिन् DOM-क्रियाणां बहूनां संख्या अस्ति, उदाहरणानि निम्नलिखितरूपेण सन्ति ।
let brandName = document.getElementById("brandName").value;
let companyName = document.getElementById("companyName").value;
let ordered = document.getElementById("ordered").value;
let description = document.getElementById("description").value;
// 获取单选框数组
let status = document.getElementsByName("status");
//2.3 给JS对象设置数据
formData.brandName = brandName;
formData.companyName = companyName;
formData.ordered = ordered;
formData.description = description;
इदं MVVM (Model-View-ViewModel) इत्यस्य विचारेण आधारितं भवति तथा च आँकडानां साक्षात्कारं कर्तुं शक्नोतिद्विपक्षीयबन्धनम् , दत्तांशेषु प्रोग्रामिंग् केन्द्रीक्रियते
स्वयमेव कर्तुं शक्यतेआधिकारिक वेबसाइटअध्ययनम्
नूतनं Html पृष्ठं रचयित्वा आयातयन्तुVue.js
प्रलेख
यदि भवान् स्थानीय Vue सञ्चिकाः परिचययति (ब्लॉगरः VUE2 इत्यस्य अन्तिमसंस्करणस्य उपयोगं करोति:Vue2.7.16开发环境
, तत्सम्बद्धं डाउनलोड् कर्तुं आधिकारिकजालस्थले गन्तुं शक्नुवन्तिjs
प्रलेख)
<script src="js/vue.js" type="text/javascript" charset="UTF-8"></script>
यदि भवान् दूरस्थेन npm संकुलेन प्रदत्तां Vue सेवां परिचययति
विकास वातावरण
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
उत्पादनपर्यावरणम्
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
JS कोड क्षेत्रे (in<Script>
tag body), data binding कृते Vue core objects रचयन्तु
Vue ऑब्जेक्ट् रचयति समये भवद्भिः js ऑब्जेक्ट् पारितव्यम्, तथा च ऑब्जेक्ट् मध्ये निम्नलिखितगुणाः आवश्यकाः सन्ति ।
गुणाः | व्याख्याति |
---|---|
el | Vue द्वारा केषां टैग्स् प्रबन्धिताः इति निर्दिशन्तु । अस्य विशेषणस्य मूल्यम्#app मध्यंapp Vue द्वारा प्रबन्धितानां टैग्स् कृतेid विशेषता मूल्यम् |
data | दत्तांशप्रकारं परिभाषितुं प्रयुक्तम् |
methods | परिभाषायाः कृते प्रयुक्तं फंक्शन्, function value return मार्गेण प्रत्यागन्तुं शक्यते |
new Vue({
el:"#app",
data() {
return {
username : ""
}
}
});
लेखनदृश्यानि (Html कोडः) .
div
लेबलं कृतम्id
एप् कृते तत्सम्बद्धं Vue ऑब्जेक्ट् निर्मितं भवति ।el
विशेषता मूल्यम्<input>
लेबल इत्यनेन सह एकं इनपुट् पेटी निर्मातिv-model
निवेशपेटिकां Vue मॉडल् प्रति द्विदिशारूपेण बन्धयितुं गुणाः v-model
विशेषतामूल्यं निर्मितस्य Vue वस्तुनः अनुरूपं भवति ।return
कोष्ठकेषु स्थापितानि आदर्शनामानि सुसंगतानि सन्ति{{}}
वुए इत्यत्र परिभाषितम् अस्ति प्रक्षेपणव्यञ्जनम् , मॉडल् मध्ये दत्तांशं प्राप्तुं प्रयुक्तम्<div id="app">
<input name="username" v-model="username">
{{username}}
</div>
सम्पूर्णः vueDemo1.html सञ्चिकासङ्केतः निम्नलिखितरूपेण अस्ति
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<input name="username" v-model="username">
{{username}}
</div>
<!--引入vue.js文件-->
<script src="js/vue.js" type="text/javascript" charset="UTF-8"></script>
<script>
// 创建Vue核心对象
new Vue({
el:"#app",
//data() 是 ECMAScript 6 版本的新的写法
data() {
return {
username : ""
}
}
/*等同于
data: function () {
return {
username : ""
}
}这个是老版本
*/
});
</script>
</body>
</html>
ब्राउजर् html पृष्ठं उद्घाटितस्य अनन्तरं चालितं स्क्रीनशॉट् निम्नलिखितम् अस्ति
निर्देशः | परिणाम |
---|---|
v-bind | विशेषतामूल्यानि HTML टैग् मध्ये बन्धयन्तु, यथा सेटिंग् href , css शैली आदि। |
v-model | रूपतत्त्वेषु द्विपक्षीयदत्तांशबन्धनं रचयन्तु |
v-on | HTML टैग्स् मध्ये इवेण्ट्स् बाइण्ड् कुर्वन्तु |
v-if | सशर्तरूपेण एकं तत्त्वं प्रतिपादयन्तु, यथा निर्धारितम्true आवश्यकतायां रेण्डर् कुर्वन्तु अन्यथा रेण्डर् न कुर्वन्तु |
v-else | सशर्तरूपेण एकं तत्त्वं प्रतिपादयन्तु, यथा निर्धारितम्true आवश्यकतायां रेण्डर् कुर्वन्तु अन्यथा रेण्डर् न कुर्वन्तु |
v-else-if | सशर्तरूपेण एकं तत्त्वं प्रतिपादयन्तु, यथा निर्धारितम्true आवश्यकतायां रेण्डर् कुर्वन्तु अन्यथा रेण्डर् न कुर्वन्तु |
v-show | शर्तानाम् आधारेण एकं तत्त्वं प्रदर्शयन्तु अन्तरं यत् स्विचः अस्तिdisplay विशेषता मूल्यम् |
v-for | सूचीप्रतिपादनं, पात्रस्य तत्त्वानि अथवा वस्तुनः गुणाः भ्रमन् |
Html
इति लेबलं कृतम्v-
उपसर्गस्य विशेषगुणाः, भिन्ननिर्देशानां भिन्नाः अर्थाः सन्ति।v-bind
、v-model
v-bind
: विशेषतामूल्यानि HTML टैग्स् मध्ये बाइण्ड् कुर्वन्तु, यथा सेटिंग् href
, css
शैली आदि।
उदाहरणानि यथा- १.
<a v-bind:href="url">百度一下</a>
इति संक्षिप्तं कर्तुं शक्यते
<a :href="url">百度一下</a>
भविष्ये यावत् URL परिवर्तते तावत् तदनुरूपःv-bind
विशेषतामूल्यानि अपि तत्क्षणमेव परिवर्तयिष्यन्ति ।
v-model
:रूपतत्त्वेषु द्विपक्षीयदत्तांशबन्धनं रचयन्तु
उदाहरणानि यथा
<input name="username" v-model="username">
सम्पूर्णं उदाहरणं यथा
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<input name="urlname" v-model="url">
{{url}}
<br>
<a :href="url">点击一下跳转</a>
</div>
<!--引入vue.js文件-->
<script src="js/vue.js" type="text/javascript" charset="UTF-8"></script>
<script>
// 创建Vue核心对象
new Vue({
el:"#app",
//data() 是 ECMAScript 6 版本的新的写法
data() {
return {
url : ""
}
}
/*等同于
data: function () {
return {
url : ""
}
}这个是老版本
*/
});
</script>
</body>
</html>
v-on
v-on
: Html टैग्स् मध्ये इवेण्ट्स् बाइण्ड् कुर्वन्तु
उदाहरणम् : कश्चन इवेण्ट् बटन् क्लिक् इत्यनेन बाध्यः भवति तथा च इवेण्ट् निष्पादितः भवतिshow()
विधिः इति लिखितःmethods
in vivo इति
<input type="button" value="按钮" v-on:click="show()">
<!--等同于如下形式-->
<input type="button" value="按钮" v-on:click="show">
<input type="button" value="按钮" @click="show()">
<!--等同于如下形式-->
<input type="button" value="按钮" @click="show">
सम्पूर्णं कोड उदाहरणं निम्नलिखितम् अस्ति ।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<input type="button" value="按钮" v-on:click="show()">
<!--简略形式-->
<input type="button" value="按钮" @click="sunShow">
</div>
<script src="js/vue.js" type="text/javascript" charset="UTF-8"></script>
<script>
new Vue({
el:"#app",
methods:{
show() {
alert("第一个按钮被点击");
},
sunShow() {
alert("第二个按钮被点击")
}
}
});
</script>
</body>
</html>
ब्राउजर् मार्गेण html पृष्ठं उद्घाट्य चालितं स्क्रीनशॉट् निम्नलिखितरूपेण भवति ।
v-if
、v-show
v-if
、v-else
、v-else-if
: एकं तत्त्वं सशर्तरूपेण प्रतिपादयन्तु, यदा तत् सत्यं निर्धारितं भवति तदा तत् प्रतिपादयन्तु, अन्यथा तत् न प्रतिपादयन्तु।
if-else if-else
<div v-if="count == 3">count==3</div>
<div v-else-if="count == 2">count==2</div>
<div v-else>count !=2 && count != 3</div>
सम्पूर्णं कोड उदाहरणं यथा अस्ति
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
请输入count的值:<br>
<input type="text" v-model="count">
<br>
count值为:
<br>
<div v-if="count == 3">count==3</div>
<div v-else-if="count == 2">count==2</div>
<div v-else>还未输入,请输入count值</div>
</div>
<script src="js/vue.js" type="text/javascript" charset="UTF-8"></script>
<script>
new Vue({
el:"#app",
data() {
return {
count:""
}
}
});
</script>
</body>
</html>
ब्राउजर् html पृष्ठं उद्घाटितस्य अनन्तरं स्क्रीनशॉट् निम्नलिखितरूपेण भवति ।
v-show
: शर्तानाम् आधारेण एकं तत्त्वं प्रदर्शयन्तु
v-show
तथाv-if
प्रभावः समानः, परन्तु कार्यान्वयनसिद्धान्तः भिन्नः अस्ति : १.v-show
अप्रदर्शनस्य सिद्धान्तः तत्सम्बद्धं टैग् योजयितुं भवतिdisplay
css attribute इति कृत्वा attribute value इत्येतत् सेट् कुर्वन्तुnone
,तथाv-if
प्रत्यक्षतया नdiv
यदा शर्ताः पूर्यन्ते तदा एव स्रोतसङ्केते टैग्स् दृश्यन्ते ।div
नामपत्र।विस्तरेण सम्पूर्णसङ्केतस्य उदाहरणस्य स्क्रीनशॉट् पश्यन्तु ।<div v-show="count == 3">div4</div>
सम्पूर्णं कोड उदाहरणं यथा अस्ति
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
请输入count的值:<br>
<input type="text" v-model="count">
<br>
count值为:
<br>
<div v-if="count == 3">count==3</div>
<div v-else-if="count == 2">count==2</div>
<div v-else>还未输入,请输入count值</div>
<hr>
<div v-show="count == 3">v-show:当count==3时展示</div>
</div>
<script src="js/vue.js" type="text/javascript" charset="UTF-8"></script>
<script>
new Vue({
el:"#app",
data() {
return {
count:""
}
}
});
</script>
</body>
</html>
ब्राउजर् html सञ्चिकां उद्घाटयति तथा च चालितं स्क्रीनशॉट् निम्नलिखितम् अस्ति ।
v-for
v-for
: सूचीप्रतिपादनं, पात्रस्य तत्त्वानि अथवा वस्तुनः गुणाः भ्रमन्
सामान्यरूपेण सरणीं पारयन्तु
<div v-for="addr in addrs">
{{addr}}<br>
</div>
अनुक्रमणिकाद्वारा सरणीं पारयन्तु
<div v-for="(addr,i) in addrs">
{{i+1}}:{{addr}}<br>
</div>
कोड उदाहरणम्
सामान्यरूपेण सरणीं पारयन्तु
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<!--遍历数组-->
<div v-for="addr in addrs">
{{addr}}<br>
</div>
</div>
<script src="js/vue.js" type="text/javascript" charset="UTF-8"></script>
<script>
new Vue({
el:"#app",
data() {
return {
addrs:["北京", "上海", "天津"]
}
}
});
</script>
</body>
</html>
अनुक्रमणिकाद्वारा सरणीं पारयन्तु
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<!--索引方式遍历数组-->
<div v-for="(addr,i) in addrs">
{{i+1}}:{{addr}}<br>
</div>
</div>
<script src="js/vue.js" type="text/javascript" charset="UTF-8"></script>
<script>
new Vue({
el:"#app",
data() {
return {
addrs:["北京", "上海", "天津"]
}
}
});
</script>
</body>
</html>
राज्यम् | चरणचक्रम् |
---|---|
beforeCreate | सृष्टेः पूर्वम् |
created | सृष्टेः अनन्तरम् |
beforeMount | लोडिंग् करणात् पूर्वं |
mounted | माउण्टिङ्ग् सम्पन्नम् |
beforeUpdate | अद्यतनीकरणात् पूर्वं |
updated | अद्यतनम् |
beforeDestroy | विनाशात् पूर्वम् |
destroyed | विनाशानन्तरं |
वुए जीवनचक्रे अष्टौ चरणाः सन्ति
प्रत्येकस्य जीवनचक्रस्य स्थितिः निम्नलिखितरूपेण अस्ति
mounted
: माउण्टिङ्ग् सम्पन्नम्, Vue आरम्भीकरणं सफलम्, Html पृष्ठप्रतिपादनं सफलम्
अस्मिन् पद्धत्या वयं दत्तांशं लोड् कर्तुं अतुल्यकालिकं अनुरोधं प्रेषयितुं शक्नुमः
सरलं उदाहरणम्
new Vue({
el:"#app",
mounted() {
alert("Vue挂载完毕,发送异步请求")
}
});
सम्पूर्ण कोड उदाहरण
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<!--普通方式遍历数组-->
<div v-for="addr in addrs">
{{addr}}<br>
</div>
<!--索引方式遍历数组-->
<div v-for="(addr,i) in addrs">
{{i+1}}:{{addr}}<br>
</div>
</div>
<script src="js/vue.js" type="text/javascript" charset="UTF-8"></script>
<script>
new Vue({
el:"#app",
data() {
return {
addrs:["北京", "上海", "天津"]
}
},
//简略版本
mounted() {
alert("Vue挂载完毕,发送异步请求")
}
/*老版本
mounted:function () {
}*/
});
</script>
</body>
</html>
VueDemo
, Gitee इत्यत्र अपलोड् कृतम् अस्ति, and canस्वयमेव डाउनलोड् कुर्वन्तुbrand.html
कृताः परिवर्तनाः यथा सन्ति
brand.html
कोडपरिवर्तनानि निम्नलिखितरूपेण सन्ति ।
mounted
विधिः अतुल्यकालिकं अनुरोधं प्रेषयति, पृष्ठस्य लोड् करणानन्तरं दत्तांशं पृच्छति च ।<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<table border="1" cellspacing="0">
<tr>
<th>序号</th>
<th>品牌名称</th>
<th>企业名称</th>
<th>排序</th>
<th>品牌介绍</th>
<th>状态</th>
<th>操作</th>
</tr>
<!--使用v-for循环遍历-->
<tr v-for="(brand,i) in brands" align="center">
<td>{{i + 1}}</td>
<td>{{brand.brandName}}</td>
<td>{{brand.companyName}}</td>
<td>{{brand.ordered}}</td>
<td>{{brand.description}}</td>
<td>{{brand.status == 1 ? "启用" : "禁用"}}</td>
<td><a href="#">修改</a><a href="#">删除</a></td>
</tr>
</table>
</div>
<script src="js/axios-0.18.0.js"></script>
<script src="js/vue.js" type="text/javascript" charset="UTF-8"></script>
<script>
new Vue({
el: "#app",
data() {
return {
brands:[]
}
},
// 页面加载完成后利用mounted方法发送异步请求并查询数据
mounted() {
// 发送异步请求并查询数据
// 在Vue的实例方法中,this指向Vue实例本身
var _this = this;
axios({
method:"get",
url:"http://localhost:8080/VueDemo/selectAllServlet"
}).then(function (resp) {
// 获取响应数据,并将数据赋给brands
// 错误写法:this.brands = resp.data;
/* 在Axios的then方法的回调函数中,this可能指向其他对象,通常是全局对象(在浏览器中是 window 对象)
所以需要提前将代指Vue示例本身的this赋给_this
*/
//axios会自动将获取的JSON字符串数据转为js对象数组
_this.brands = resp.data;
})
}
})
</script>
</body>
</html>
Tomcat इत्यनेन जालप्रकल्पं चालयित्वा स्क्रीनशॉट् निम्नलिखितरूपेण अस्ति
प्रश्न
किमर्थं स्यात्var _this = this
, किमर्थं न प्रत्यक्षम्this.brands=resp.data
जावास्क्रिप्ट् मध्ये
this
कीवर्डस्य व्यवहारः यस्मिन् सन्दर्भे सः आह्वयते तस्मिन् आश्रितः भवति । वुए इत्यस्य दृष्टान्तविधौ .this
Vue दृष्टान्तं प्रति एव सूचयति ।परन्तु अक्षयम् इत्यत्रthen
विधिस्य callback फंक्शन् मध्ये, .this
अन्यवस्तूनि सूचयितुं शक्नोति, प्रायः वैश्विकं वस्तु (ब्राउजरेषु एतत् अस्तिwindow
वस्तु)। एतेन भवन्तः Vue दृष्टान्तस्य गुणाः विधिः च सम्यक् प्राप्तुं असमर्थाः भविष्यन्ति ।परिभाषया
var _this = this
, भवन्तः Vue उदाहरणस्य करिष्यन्तिthis
save at_this
variable ततः callback function इत्यस्मिन् तस्य उपयोगं कुर्वन्तु_this
Vue उदाहरणस्य सम्यक् सन्दर्भं कर्तुं ।
addbrand.html
कृताः परिवर्तनाः यथा सन्ति
brand.html
कोडपरिवर्तनानि निम्नलिखितरूपेण सन्ति ।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<!--给新增按钮绑定单击事件-->
<input type="button" value="新增" v-on:click="addBrand()"><br>
<hr>
<table border="1" cellspacing="0">
<tr>
<th>序号</th>
<th>品牌名称</th>
<th>企业名称</th>
<th>排序</th>
<th>品牌介绍</th>
<th>状态</th>
<th>操作</th>
</tr>
<!--使用v-for循环遍历-->
<tr v-for="(brand,i) in brands" align="center">
<td>{{i + 1}}</td>
<td>{{brand.brandName}}</td>
<td>{{brand.companyName}}</td>
<td>{{brand.ordered}}</td>
<td>{{brand.description}}</td>
<td>{{brand.status == 1 ? "启用" : "禁用"}}</td>
<td><a href="#">修改</a><a href="#">删除</a></td>
</tr>
</table>
</div>
<script src="js/axios-0.18.0.js"></script>
<script src="js/vue.js" type="text/javascript" charset="UTF-8"></script>
<script>
new Vue({
el: "#app",
data() {
return {
brands:[]
}
},
methods:{
addBrand() {
location.href = "/VueDemo/addBrand.html";
}
},
// 页面加载完成后利用mounted方法发送异步请求并查询数据
mounted() {
// 发送异步请求并查询数据
// 在Vue的实例方法中,this指向Vue实例本身
var _this = this;
axios({
method:"get",
url:"http://localhost:8080/VueDemo/selectAllServlet"
}).then(function (resp) {
// 获取响应数据,并将数据赋给brands
// 错误写法:this.brands = resp.data;
/* 在Axios的then方法的回调函数中,this可能指向其他对象,通常是全局对象(在浏览器中是 window 对象)
所以需要提前将代指Vue示例本身的this赋给_this
*/
//axios会自动将获取的JSON字符串数据转为js对象数组
_this.brands = resp.data;
})
}
})
</script>
</body>
</html>
addBrand.html
कोडः निम्नलिखितरूपेण परिवर्तितः अस्ति ।
vue.js
प्रलेखv-model
रूपतत्त्वेषु विशेषताः क्रियन्तेद्विपक्षीयदत्तांशबन्धनम्<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>添加品牌</title>
</head>
<body>
<h3>添加品牌</h3>
<div id="app">
<!--表单直接提交属于同步请求方式提交表单,为了使用异步方式以及AJAX+JSON异步方式提交所以要将action属性值设为空并将提交按钮的type属性值设为button-->
<!--action的属性值为浏览器提交到服务器的资源路径-->
<!--将action属性值由具体的url改为空-->
<form action="" method="post">
品牌名称:<input id="brandName" name="brandName" v-model="brand.brandName"><br>
企业名称:<input id="companyName" name="companyName" v-model="brand.companyName"><br>
排序:<input id="ordered" name="ordered" v-model="brand.ordered"><br>
描述信息:<textarea rows="5" cols="20" id="description" name="description" v-model="brand.description"></textarea><br>
状态:
<input type="radio" name="status" value="0" v-model="brand.status">禁用
<input type="radio" name="status" value="1" v-model="brand.status">启用<br>
<!--将提交按钮的type属性由submit改为button-->
<input type="button" v-on:click="submitForm()" value="提交">
</form>
</div>
<script src="js/axios-0.18.0.js"></script>
<script src="js/vue.js" type="text/javascript" charset="UTF-8"></script>
<script>
new Vue({
el: "#app",
data() {
return {
/*
由于数据最终要封装为对象,所以直接创建一个对象即可
注意:不需要给该对象属性,是因为 Vue.js 的双向数据绑定机制和响应式系统会自动处理,
即v-model 自动创建对象属性并追踪它们,只要用户填写输入框,就会自动将其作为brand对象的属性封装起来
*/
brand:{}
}
},
methods:{
submitForm() {
var _this = this;
// 发送axios请求并添加数据
axios({
method:"post",
url:"http://localhost:8080/VueDemo/addServlet",
//3 JSON数据格式发送请求
// formData为JS对象,Axios会自动将JS对象转为JSON字符串然后在传给服务端
data:_this.brand
}).then(function (resp) {
//4 获取响应数据并判断响应数据是否为success
if(resp.data == "success"){
location.href = "http://localhost:8080/VueDemo/brand.html";
}
})
}
}
})
</script>
</body>
</html>
Tomcat इत्यनेन जालप्रकल्पं चालितस्य अनन्तरं चालितं स्क्रीनशॉट् निम्नलिखितरूपेण भवति
परिभाषा
सूचना:
element-ui
आधिकारिकजालस्थलं डाउनलोड् कुर्वन्तुअवतरणं कर्तुं असमर्थः, भवान् स्वयमेव अवतरणं कर्तुं निम्नलिखितसङ्केतस्य उपयोगं कर्तुं शक्नोति (भवन्तः स्वयमेव डाउनलोड् मार्गं तत्सम्बद्धस्य संस्करणस्य URL च परिवर्तयितुं शक्नुवन्ति)import java.io.File;
import java.io.FileOutputStream;
import java.io.InputStream;
import java.net.HttpURLConnection;
import java.net.URL;
import java.nio.charset.StandardCharsets;
import java.util.ArrayList;
/**
* 下载element-ui
*/
public class Main {
//本地保存目录
static String fileP = "F:/insert/java/element-ui/";
//url
static String urlP = "https://unpkg.com/browse/[email protected]/";
static String urlF = "https://unpkg.com/[email protected]/";
public static void main(String[] args){
try {
GetPage("");
} catch (Exception e) {
e.printStackTrace();
}
System.out.println("done ......");
}
static void GetPage(String after) throws Exception {
System.out.println(urlP + after);
new File(fileP + after).mkdir();
HttpURLConnection http = (HttpURLConnection) (new URL(urlP + after)).openConnection();
http.setRequestMethod("GET");
http.setRequestProperty("User-Agent", "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/71.0.3562.0 Safari/537.36");
http.connect();
if(http.getResponseCode() == 200) {
InputStream inputStream = http.getInputStream();
byte [] buffer = new byte[10240];
ArrayList<byte []> byteList = new ArrayList<>();
ArrayList<Integer> byteLength = new ArrayList<>();
int length;
int totalLength = 0;
while( (length = inputStream.read(buffer)) != -1 ) {
byteList.add(buffer);
byteLength.add(length);
totalLength += length;
buffer = new byte[10240];
}
http.disconnect();
byte [] all;
all = new byte[totalLength];
totalLength = 0;
while(byteList.size() != 0) {
System.arraycopy(byteList.get(0), 0, all, totalLength, byteLength.get(0));
totalLength += byteLength.get(0);
byteList.remove(0);
byteLength.remove(0);
}
String content = new String(all, StandardCharsets.UTF_8);
all = null;
content = content.split("tbody")[1];
String [] us = content.split("href="");
for(int i = 1; i < us.length; i ++) {
String href = us[i].split(""", 2)[0];
if(href.equals("../")) {
continue;
}
if(href.charAt(href.length() - 1) == '/') {
GetPage(after + href);
} else {
//下载文件,失败重试,大部分是网络原因
try {
GetFile(after + href);
}catch (Exception e){
System.out.println(after + href + " 下载失败,重试");
GetFile(after + href);
}
}
}
} else {
GetPage(after);
}
}
static void GetFile(String url) throws Exception{
System.out.println(url);
HttpURLConnection http;
http = (HttpURLConnection) (new URL(urlF + url)).openConnection();
http.setRequestMethod("GET");
http.setRequestProperty("User-Agent", "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/71.0.3562.0 Safari/537.36");
http.connect();
if(http.getResponseCode() == 200) {
InputStream inputStream = http.getInputStream();
byte [] buffer = new byte[10240];
ArrayList<byte []> byteList = new ArrayList<>();
ArrayList<Integer> byteLength = new ArrayList<>();
int length;
int totalLength = 0;
while( (length = inputStream.read(buffer)) != -1 ) {
byteList.add(buffer);
byteLength.add(length);
totalLength += length;
buffer = new byte[10240];
}
http.disconnect();
byte [] all;
all = new byte[totalLength];
totalLength = 0;
while(byteList.size() != 0) {
System.arraycopy(byteList.get(0), 0, all, totalLength, byteLength.get(0));
totalLength += byteLength.get(0);
byteList.remove(0);
byteLength.remove(0);
}
File f = new File(fileP + url.replaceAll("/", "\\"));
//文件存在,不重复下载
if(f.exists()){
System.out.println(f.getAbsoluteFile() + " 存在");
return;
}
f.createNewFile();
FileOutputStream fos = new FileOutputStream(f, false);
fos.write(all);
fos.flush();
fos.close();
} else {
GetFile(url);
}
}
}
Step1: 1.1. Vue.js सञ्चिकां परिचययन्तु
Step2: 1.1. भविष्यतिelement-ui
निर्देशिका जालप्रकल्पस्य (अर्थात् webapp) मूलनिर्देशिकायाः अधः स्थापिता भवति, ततः आयातिता भवतिelement-ui
css, js सञ्चिकाः
स्थानीय Element css तथा js सञ्चिकाः परिचययन्तु
<!-- 引入样式 -->
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="element-ui/lib/index.js"></script>
दूरस्थस्य Element इत्यस्य css तथा js सञ्चिकाः परिचययन्तु
<!-- 引入样式 -->
<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>
Step3: 1.1. Vue कोर ऑब्जेक्ट्स् रचयन्तु (विवरणार्थं Vue विभागं पश्यन्तु)
Step4: 1.1. तत्वआधिकारिक वेबसाइटElement घटकसङ्केतं प्रतिलिख्यताम्
मूलभूतः html पृष्ठसंरचनासङ्केतः निम्नलिखितरूपेण अस्ति ।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<!--3 从官网复制自己想要的组件代码并做对应设计更改-->
</div>
<!--1 引入vue.js文件、element的index.css文件和index.js文件-->
<script src="js/vue.js" type="text/javascript" charset="UTF-8"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="element-ui/lib/index.js"></script>
<!--2 创建Vue核心对象-->
<script>
new Vue({
el : "#app"
})
</script>
</body>
</html>
सम्पूर्णं कोड उदाहरणं यथा अस्ति
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<!--3 从官网复制自己想要的组件代码 : 以button按钮为例-->
<el-row>
<el-button round>圆角按钮</el-button>
<el-button type="primary" round>主要按钮</el-button>
<el-button type="success" round>成功按钮</el-button>
<el-button type="info" round>信息按钮</el-button>
<el-button type="warning" round>警告按钮</el-button>
<el-button type="danger" round>危险按钮</el-button>
</el-row>
</div>
<!--1 引入vue.js文件、element的index.css文件和index.js文件-->
<script src="js/vue.js" type="text/javascript" charset="UTF-8"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="element-ui/lib/index.js"></script>
<!--2 创建Vue核心对象-->
<script>
new Vue({
el : "#app"
})
</script>
</body>
</html>
ब्राउजर् इत्यनेन html सञ्चिकां उद्घाटितस्य अनन्तरं पृष्ठं निम्नलिखितरूपेण दृश्यते
परिभाषा : शीघ्रं सुलभतया च मूलभूतेन २४-स्तम्भेन सह विन्यासान् निर्मायताम्
व्याख्या : एतत् अनेकानि पङ्क्तयः प्रदास्यति, प्रत्येकं पङ्क्तौ २४ मूलभूतजालानि सन्ति
चरण:
Step1: vue.js सञ्चिकां, element इत्यस्य index.css सञ्चिकां, index.js सञ्चिकां च परिचययन्तु
Step2: Vue कोर ऑब्जेक्ट् रचयन्तु
Step3: आधिकारिकजालस्थलात् इच्छितं घटकसङ्केतं प्रतिलिख्यताम्
<style>
टैग् इत्यस्य मुख्यभागः css style code अस्ति, यस्य परिचयं वयं बाह्यरूपेण कर्तुं शक्नुमः अथवा प्रत्यक्षतया html पृष्ठे लिखितुं शक्नुमः ।<el-row>
<el-col :span="24"><div class="grid-content bg-purple-dark"></div></el-col>
</el-row>
<el-row>
<el-col :span="12"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="12"><div class="grid-content bg-purple-light"></div></el-col>
</el-row>
<el-row>
<el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="8"><div class="grid-content bg-purple-light"></div></el-col>
<el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
</el-row>
<el-row>
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
</el-row>
<el-row>
<el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
<el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
<el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
</el-row>
<style>
.el-row {
margin-bottom: 20px;
&:last-child {
margin-bottom: 0;
}
}
.el-col {
border-radius: 4px;
}
.bg-purple-dark {
background: #99a9bf;
}
.bg-purple {
background: #d3dce6;
}
.bg-purple-light {
background: #e5e9f2;
}
.grid-content {
border-radius: 4px;
min-height: 36px;
}
.row-bg {
padding: 10px 0;
background-color: #f9fafc;
}
</style>
सम्पूर्ण कोड उदाहरण
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--head标签体内放入css样式代码-->
<style>
.el-row {
margin-bottom: 20px;
&:last-child {
margin-bottom: 0;
}
}
.el-col {
border-radius: 4px;
}
.bg-purple-dark {
background: #99a9bf;
}
.bg-purple {
background: #d3dce6;
}
.bg-purple-light {
background: #e5e9f2;
}
.grid-content {
border-radius: 4px;
min-height: 36px;
}
.row-bg {
padding: 10px 0;
background-color: #f9fafc;
}
</style>
</head>
<body>
<div id="app">
<el-row>
<el-col :span="24"><div class="grid-content bg-purple-dark"></div></el-col>
</el-row>
<el-row>
<el-col :span="12"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="12"><div class="grid-content bg-purple-light"></div></el-col>
</el-row>
<el-row>
<el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="8"><div class="grid-content bg-purple-light"></div></el-col>
<el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
</el-row>
<el-row>
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
</el-row>
<el-row>
<el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
<el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
<el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
</el-row>
</div>
<!--1 引入vue.js文件、element的index.css文件和index.js文件-->
<script src="js/vue.js" type="text/javascript" charset="UTF-8"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="element-ui/lib/index.js"></script>
<!--2 创建Vue核心对象-->
<script>
new Vue({
el : "#app"
})
</script>
</body>
</html>
ब्राउजर् मार्गेण html पृष्ठं उद्घाटयन्तु, स्क्रीनशॉट् यथा भवति
परिभाषा : पृष्ठस्य मूलभूतसंरचनायाः शीघ्रनिर्माणस्य सुविधायै विन्यासार्थं प्रयुक्तः पात्रघटकः
व्याख्या : यथा उपरि चित्रे दर्शितं तथा वाममार्गदर्शनपट्टिकायुक्तः विन्यासः अस्ति
चरण:
Step1: vue.js सञ्चिकां, element इत्यस्य index.css सञ्चिकां, index.js सञ्चिकां च परिचययन्तु
Step2: Vue कोर ऑब्जेक्ट् रचयन्तु
Step3: आधिकारिकजालस्थलात् इच्छितं घटकसङ्केतं प्रतिलिख्यताम्
प्रथमं उदाहरणं उदाहरणरूपेण गृह्यताम्, यथा आधिकारिकजालस्थलचित्रे दर्शितम् अस्ति
अस्मिन् उदाहरणे html तथा css कोड् इत्येतयोः अतिरिक्तं Vue ऑब्जेक्ट् इत्यस्य एट्रिब्यूट् अपि सन्ति, यथा
<script>
//export default为自己创建的Vue对象
export default {
data() {
const item = {
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
};
return {
tableData: Array(20).fill(item)
}
}
};
</script>
वयं आधिकारिकजालस्थले दृष्टान्तेषु Vue इत्यस्य गुणानाम् प्रतिलिपिं कर्तुं शक्नुमः स्वस्य Vue कोर ऑब्जेक्ट् इत्यत्र, यथा निम्नलिखितम्
<script>
new Vue({
el : "#app",
data() {
const item = {
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
};
return {
tableData: Array(20).fill(item)
}
}
})
</script>
सम्पूर्ण कोड उदाहरण
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--head标签体内放入css样式代码-->
<style>
.el-header {
background-color: #B3C0D1;
color: #333;
line-height: 60px;
}
.el-aside {
color: #333;
}
</style>
</head>
<body>
<div id="app">
<el-container style="height: 500px; border: 1px solid #eee">
<el-aside width="200px" style="background-color: rgb(238, 241, 246)">
<el-menu :default-openeds="['1', '3']">
<el-submenu index="1">
<template slot="title"><i class="el-icon-message"></i>导航一</template>
<el-menu-item-group>
<template slot="title">分组一</template>
<el-menu-item index="1-1">选项1</el-menu-item>
<el-menu-item index="1-2">选项2</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="分组2">
<el-menu-item index="1-3">选项3</el-menu-item>
</el-menu-item-group>
<el-submenu index="1-4">
<template slot="title">选项4</template>
<el-menu-item index="1-4-1">选项4-1</el-menu-item>
</el-submenu>
</el-submenu>
<el-submenu index="2">
<template slot="title"><i class="el-icon-menu"></i>导航二</template>
<el-menu-item-group>
<template slot="title">分组一</template>
<el-menu-item index="2-1">选项1</el-menu-item>
<el-menu-item index="2-2">选项2</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="分组2">
<el-menu-item index="2-3">选项3</el-menu-item>
</el-menu-item-group>
<el-submenu index="2-4">
<template slot="title">选项4</template>
<el-menu-item index="2-4-1">选项4-1</el-menu-item>
</el-submenu>
</el-submenu>
<el-submenu index="3">
<template slot="title"><i class="el-icon-setting"></i>导航三</template>
<el-menu-item-group>
<template slot="title">分组一</template>
<el-menu-item index="3-1">选项1</el-menu-item>
<el-menu-item index="3-2">选项2</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="分组2">
<el-menu-item index="3-3">选项3</el-menu-item>
</el-menu-item-group>
<el-submenu index="3-4">
<template slot="title">选项4</template>
<el-menu-item index="3-4-1">选项4-1</el-menu-item>
</el-submenu>
</el-submenu>
</el-menu>
</el-aside>
<el-container>
<el-header style="text-align: right; font-size: 12px">
<el-dropdown>
<i class="el-icon-setting" style="margin-right: 15px"></i>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>查看</el-dropdown-item>
<el-dropdown-item>新增</el-dropdown-item>
<el-dropdown-item>删除</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<span>王小虎</span>
</el-header>
<el-main>
<el-table :data="tableData">
<el-table-column prop="date" label="日期" width="140">
</el-table-column>
<el-table-column prop="name" label="姓名" width="120">
</el-table-column>
<el-table-column prop="address" label="地址">
</el-table-column>
</el-table>
</el-main>
</el-container>
</el-container>
</div>
<!--1 引入vue.js文件、element的index.css文件和index.js文件-->
<script src="js/vue.js" type="text/javascript" charset="UTF-8"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="element-ui/lib/index.js"></script>
<!--2 创建Vue核心对象-->
<script>
new Vue({
el : "#app",
data() {
const item = {
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
};
return {
tableData: Array(20).fill(item)
}
}
})
</script>
</body>
</html>
ब्राउजर् मार्गेण html पृष्ठं उद्घाटयन्तु, स्क्रीनशॉट् यथा भवति
यथा अधः दर्शितं तथा प्रभावं कुर्वन्तु
Step1: 1.1. आधिकारिकजालस्थले गत्वा प्रपत्रस्य तत्सम्बद्धं उदाहरणं प्रतिलिख्य (सह...स्थितिप्रपत्रसहितं आधिकारिकजालस्थलम्यथा), सङ्केतः यथा भवति ।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--表格css样式-->
<style>
.el-table .warning-row {
background: oldlace;
}
.el-table .success-row {
background: #f0f9eb;
}
</style>
</head>
<body>
<div id="app">
<!--3 从官网复制自己想要的组件代码-->
<!--表格代码-->
<template>
<el-table
:data="tableData"
style="width: 100%"
:row-class-name="tableRowClassName">
<el-table-column
prop="date"
label="日期"
width="180">
</el-table-column>
<el-table-column
prop="name"
label="姓名"
width="180">
</el-table-column>
<el-table-column
prop="address"
label="地址">
</el-table-column>
</el-table>
</template>
</div>
<!--1 引入vue.js文件、element的index.css文件和index.js文件-->
<script src="js/vue.js" type="text/javascript" charset="UTF-8"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="element-ui/lib/index.js"></script>
<!--2 创建Vue核心对象-->
<script>
new Vue({
el : "#app",
//表格属性
methods: {
tableRowClassName({row, rowIndex}) {
if (rowIndex === 1) {
return 'warning-row';
} else if (rowIndex === 3) {
return 'success-row';
}
return '';
}
},
data() {
return {
tableData: [{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄',
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄',
}, {
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}]
}
}
})
</script>
</body>
</html>
ब्राउजर् इत्यनेन html पृष्ठं उद्घाटितस्य अनन्तरं, यथा चित्रे दर्शितं, रूक्षं चित्रं प्राप्त्वा समायोजनं कर्तुं आरभत ।
Step2: 1.1. Step 1 मध्ये प्राप्ते सारणीयां स्तम्भान् दत्तांशं च योजयित्वा स्तम्भनामानि परिवर्तयन्तु
लुप्width
प्रत्येकं स्तम्भः स्वयमेव विशेषतायाः अनन्तरं स्वस्य विस्तारं समायोजयिष्यति ।
सारणीसामग्री केन्द्रीकृत्य: आधिकारिकजालस्थलस्य तत्सम्बद्धे सारणीघटकविभागे अधः स्क्रॉलं कृत्वा तत्सम्बद्धानि पद्धतीः गुणाः च अन्वेष्टव्याः, यथा चित्रे दर्शितम् अस्तिगुणाः सेट् कुर्वन्तुalign="center"
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--表格css样式-->
<style>
.el-table .warning-row {
background: oldlace;
}
.el-table .success-row {
background: #f0f9eb;
}
</style>
</head>
<body>
<div id="app">
<!--3 从官网复制自己想要的组件代码-->
<!--表格代码-->
<template>
<el-table
:data="tableData"
style="width: 100%"
:row-class-name="tableRowClassName">
<el-table-column
prop="brandName"
label="品牌名称"
align="center">
</el-table-column>
<el-table-column
prop="companyName"
label="企业名称"
align="center">
</el-table-column>
<el-table-column
prop="ordered"
label="排序"
align="center">
</el-table-column>
<el-table-column
prop="status"
label="当前状态"
align="center">
</el-table-column>
</el-table>
</template>
</div>
<!--1 引入vue.js文件、element的index.css文件和index.js文件-->
<script src="js/vue.js" type="text/javascript" charset="UTF-8"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="element-ui/lib/index.js"></script>
<!--2 创建Vue核心对象-->
<script>
new Vue({
el : "#app",
//表格属性
methods: {
tableRowClassName({row, rowIndex}) {
if (rowIndex === 1) {
return 'warning-row';
} else if (rowIndex === 3) {
return 'success-row';
}
return '';
}
},
data() {
return {
tableData: [{
brandName: '小米',
companyName: '小米科技有限公司',
ordered: '10',
status: '启用'
}, {
brandName: '小米',
companyName: '小米科技有限公司',
ordered: '10',
status: '启用'
}, {
brandName: '小米',
companyName: '小米科技有限公司',
ordered: '10',
status: '启用'
}, {
brandName: '小米',
companyName: '小米科技有限公司',
ordered: '10',
status: '启用'
}, {
brandName: '小米',
companyName: '小米科技有限公司',
ordered: '10',
status: '启用'
}, {
brandName: '小米',
companyName: '小米科技有限公司',
ordered: '10',
status: '启用'
}]
}
}
})
</script>
</body>
</html>
Step3: 1.1. सारणीयां क्रियास्तम्भं योजयन्तु
修改
तथा删除
बटनं कृत्वा, तत्सम्बद्धं बटनसङ्केतं अन्वेष्टुं आधिकारिकजालस्थले गत्वा, तस्य प्रतिलिपिं कृत्वा चिनोतु<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--表格css样式-->
<style>
.el-table .warning-row {
background: oldlace;
}
.el-table .success-row {
background: #f0f9eb;
}
</style>
</head>
<body>
<div id="app">
<!--3 从官网复制自己想要的组件代码-->
<!--表格代码-->
<template>
<el-table
:data="tableData"
style="width: 100%"
:row-class-name="tableRowClassName">
<el-table-column
prop="brandName"
label="品牌名称"
align="center">
</el-table-column>
<el-table-column
prop="companyName"
label="企业名称"
align="center">
</el-table-column>
<el-table-column
prop="ordered"
label="排序"
align="center">
</el-table-column>
<el-table-column
prop="status"
label="当前状态"
align="center">
</el-table-column>
<el-table-column
label="操作"
align="center">
<el-row>
<el-button type="primary">修改</el-button>
<el-button type="danger">删除</el-button>
</el-row>
</el-table-column>
</el-table>
</template>
</div>
<!--1 引入vue.js文件、element的index.css文件和index.js文件-->
<script src="js/vue.js" type="text/javascript" charset="UTF-8"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="element-ui/lib/index.js"></script>
<!--2 创建Vue核心对象-->
<script>
new Vue({
el : "#app",
//表格属性
methods: {
tableRowClassName({row, rowIndex}) {
if (rowIndex === 1) {
return 'warning-row';
} else if (rowIndex === 3) {
return 'success-row';
}
return '';
}
},
data() {
return {
tableData: [{
brandName: '小米',
companyName: '小米科技有限公司',
ordered: '10',
status: '启用'
}, {
brandName: '小米',
companyName: '小米科技有限公司',
ordered: '10',
status: '启用'
}, {
brandName: '小米',
companyName: '小米科技有限公司',
ordered: '10',
status: '启用'
}, {
brandName: '小米',
companyName: '小米科技有限公司',
ordered: '10',
status: '启用'
}, {
brandName: '小米',
companyName: '小米科技有限公司',
ordered: '10',
status: '启用'
}, {
brandName: '小米',
companyName: '小米科技有限公司',
ordered: '10',
status: '启用'
}]
}
}
})
</script>
</body>
</html>
Step4: 1.1. सारणीयां क्रमाङ्कं योजयन्तु : आधिकारिकजालस्थले क्रमाङ्कयुक्तं सारणीं अन्वेष्टुम्, क्रमाङ्कं योजयितुं च कोडं प्रतिलिख्यताम् ।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--表格css样式-->
<style>
.el-table .warning-row {
background: oldlace;
}
.el-table .success-row {
background: #f0f9eb;
}
</style>
</head>
<body>
<div id="app">
<!--3 从官网复制自己想要的组件代码-->
<!--表格代码-->
<template>
<el-table
:data="tableData"
style="width: 100%"
:row-class-name="tableRowClassName">
<!--给表格添加序号-->
<el-table-column
type="index">
</el-table-column>
<el-table-column
prop="brandName"
label="品牌名称"
align="center">
</el-table-column>
<el-table-column
prop="companyName"
label="企业名称"
align="center">
</el-table-column>
<el-table-column
prop="ordered"
label="排序"
align="center">
</el-table-column>
<el-table-column
prop="status"
label="当前状态"
align="center">
</el-table-column>
<el-table-column
label="操作"
align="center">
<el-row>
<el-button type="primary">修改</el-button>
<el-button type="danger">删除</el-button>
</el-row>
</el-table-column>
</el-table>
</template>
</div>
<!--1 引入vue.js文件、element的index.css文件和index.js文件-->
<script src="js/vue.js" type="text/javascript" charset="UTF-8"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="element-ui/lib/index.js"></script>
<!--2 创建Vue核心对象-->
<script>
new Vue({
el : "#app",
//表格属性
methods: {
tableRowClassName({row, rowIndex}) {
if (rowIndex === 1) {
return 'warning-row';
} else if (rowIndex === 3) {
return 'success-row';
}
return '';
}
},
data() {
return {
tableData: [{
brandName: '小米',
companyName: '小米科技有限公司',
ordered: '10',
status: '启用'
}, {
brandName: '小米',
companyName: '小米科技有限公司',
ordered: '10',
status: '启用'
}, {
brandName: '小米',
companyName: '小米科技有限公司',
ordered: '10',
status: '启用'
}, {
brandName: '小米',
companyName: '小米科技有限公司',
ordered: '10',
status: '启用'
}, {
brandName: '小米',
companyName: '小米科技有限公司',
ordered: '10',
status: '启用'
}, {
brandName: '小米',
companyName: '小米科技有限公司',
ordered: '10',
status: '启用'
}]
}
}
})
</script>
</body>
</html>
Step5: 1.1. सारणीयां चेकबॉक्सं योजयन्तु: चेकबॉक्सयुक्तं सारणीं अन्विष्य चेकबॉक्सस्य कोडं प्रतिलिख्यताम्
यतः case diagram मध्ये check box इत्यस्य चयनानन्तरं data इत्यस्य पङ्क्तौ batch operations कर्तुं शक्यते, अतः table इत्यस्य मेथड् अवश्यमेव भवितुमर्हति, अतः यदा वयं check box इत्यस्य विषये code प्रतिलिखयामः तदा Copy इति check box इत्यनेन सह table इत्यस्य अपि प्रतिलिपिं कर्तुं अर्हति the corresponding method in (Vue core object इत्यस्मिन् एतत् मेथड् लिखितुं न विस्मरन्तु), मेथड् निम्नलिखितरूपेण अस्ति
handleSelectionChange(val) {
this.multipleSelection = val;
}
अस्य पद्धतेः गुणः अस्तिmultipleSelection
, अतः अस्माभिः एतत् विशेषतां स्वस्य कोड् मध्ये प्रतिलिखितव्यम् अन्तिमः सम्पूर्णः कोडः निम्नलिखितरूपेण अस्ति ।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--表格css样式-->
<style>
.el-table .warning-row {
background: oldlace;
}
.el-table .success-row {
background: #f0f9eb;
}
</style>
</head>
<body>
<div id="app">
<!--3 从官网复制自己想要的组件代码-->
<!--表格代码-->
<template>
<el-table
:data="tableData"
style="width: 100%"
:row-class-name="tableRowClassName"
@selection-change="handleSelectionChange"><!--给表格添加handleSelectionChange方法-->
<!--给表格添加复选框-->
<el-table-column
type="selection">
</el-table-column>
<!--给表格添加序号-->
<el-table-column
type="index">
</el-table-column>
<el-table-column
prop="brandName"
label="品牌名称"
align="center">
</el-table-column>
<el-table-column
prop="companyName"
label="企业名称"
align="center">
</el-table-column>
<el-table-column
prop="ordered"
label="排序"
align="center">
</el-table-column>
<el-table-column
prop="status"
label="当前状态"
align="center">
</el-table-column>
<el-table-column
label="操作"
align="center">
<el-row>
<el-button type="primary">修改</el-button>
<el-button type="danger">删除</el-button>
</el-row>
</el-table-column>
</el-table>
</template>
</div>
<!--1 引入vue.js文件、element的index.css文件和index.js文件-->
<script src="js/vue.js" type="text/javascript" charset="UTF-8"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="element-ui/lib/index.js"></script>
<!--2 创建Vue核心对象-->
<script>
new Vue({
el : "#app",
//表格属性
methods: {
tableRowClassName({row, rowIndex}) {
if (rowIndex === 1) {
return 'warning-row';
} else if (rowIndex === 3) {
return 'success-row';
}
return '';
},
// 复选框选中后执行的方法
handleSelectionChange(val) {
this.multipleSelection = val;
}
},
data() {
return {
multipleSelection: [],
tableData: [{
brandName: '小米',
companyName: '小米科技有限公司',
ordered: '10',
status: '启用'
}, {
brandName: '小米',
companyName: '小米科技有限公司',
ordered: '10',
status: '启用'
}, {
brandName: '小米',
companyName: '小米科技有限公司',
ordered: '10',
status: '启用'
}, {
brandName: '小米',
companyName: '小米科技有限公司',
ordered: '10',
status: '启用'
}, {
brandName: '小米',
companyName: '小米科技有限公司',
ordered: '10',
status: '启用'
}, {
brandName: '小米',
companyName: '小米科技有限公司',
ordered: '10',
status: '启用'
}]
}
}
})
</script>
</body>
</html>
चेकबॉक्स मेथड् मध्ये आउटपुट् योजयित्वा परीक्षणं कुर्वन्तु यत् एतत् सफलम् अस्ति वा इति
handleSelectionChange(val) {
this.multipleSelection = val;
console.log(this.multipleSelection)
}
ब्राउजर् मध्ये पृष्ठं उद्घाट्य विकासकसाधनं उद्घाटयन्तु → आउटपुट् द्रष्टुं Console नियन्त्रकं चिनोतु, यथा चित्रे दर्शितम् अस्ति
Step6: 1.1. एकं प्रपत्रं योजयन्तु : केस-चित्रे यत् प्रपत्रं भवति तत् क्षैतिजं भवति, अतः वयं आधिकारिकजालस्थले समानं प्रपत्रं (अर्थात् इनलाइन-प्रपत्रं) अन्विष्य कोडस्य प्रतिलिपिं कुर्मः
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--表格css样式-->
<style>
.el-table .warning-row {
background: oldlace;
}
.el-table .success-row {
background: #f0f9eb;
}
</style>
</head>
<body>
<div id="app">
<!--3 从官网复制自己想要的组件代码-->
<!--表单代码-->
<el-form :inline="true" :model="formInline" class="demo-form-inline">
<el-form-item label="审批人">
<el-input v-model="formInline.user" placeholder="审批人"></el-input>
</el-form-item>
<el-form-item label="活动区域">
<el-select v-model="formInline.region" placeholder="活动区域">
<el-option label="区域一" value="shanghai"></el-option>
<el-option label="区域二" value="beijing"></el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">查询</el-button>
</el-form-item>
</el-form>
<!--表格代码-->
<template>
<el-table
:data="tableData"
style="width: 100%"
:row-class-name="tableRowClassName"
@selection-change="handleSelectionChange"><!--给表格添加handleSelectionChange方法-->
<!--给表格添加复选框-->
<el-table-column
type="selection">
</el-table-column>
<!--给表格添加序号-->
<el-table-column
type="index">
</el-table-column>
<el-table-column
prop="brandName"
label="品牌名称"
align="center">
</el-table-column>
<el-table-column
prop="companyName"
label="企业名称"
align="center">
</el-table-column>
<el-table-column
prop="ordered"
label="排序"
align="center">
</el-table-column>
<el-table-column
prop="status"
label="当前状态"
align="center">
</el-table-column>
<el-table-column
label="操作"
align="center">
<el-row>
<el-button type="primary">修改</el-button>
<el-button type="danger">删除</el-button>
</el-row>
</el-table-column>
</el-table>
</template>
</div>
<!--1 引入vue.js文件、element的index.css文件和index.js文件-->
<script src="js/vue.js" type="text/javascript" charset="UTF-8"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="element-ui/lib/index.js"></script>
<!--2 创建Vue核心对象-->
<script>
new Vue({
el : "#app",
//表格属性
methods: {
// 表单方法
onSubmit() {
console.log('submit!');
},
// 复选框选中后执行的方法
handleSelectionChange(val) {
this.multipleSelection = val;
//测试与复选框关联的方法是否成功,测试完成后自行删除即可
console.log(this.multipleSelection)
},
// 表格方法
tableRowClassName({row, rowIndex}) {
if (rowIndex === 1) {
return 'warning-row';
} else if (rowIndex === 3) {
return 'success-row';
}
return '';
}
},
data() {
return {
// 表单数据
formInline: {
user: '',
region: ''
},
// 复选框数据
multipleSelection: [],
// 表格数据
tableData: [{
brandName: '小米',
companyName: '小米科技有限公司',
ordered: '10',
status: '启用'
}, {
brandName: '小米',
companyName: '小米科技有限公司',
ordered: '10',
status: '启用'
}, {
brandName: '小米',
companyName: '小米科技有限公司',
ordered: '10',
status: '启用'
}, {
brandName: '小米',
companyName: '小米科技有限公司',
ordered: '10',
status: '启用'
}, {
brandName: '小米',
companyName: '小米科技有限公司',
ordered: '10',
status: '启用'
}, {
brandName: '小米',
companyName: '小米科技有限公司',
ordered: '10',
status: '启用'
}]
}
}
})
</script>
</body>
</html>
Step7: 1.1. प्रकरणचित्रेण सह सङ्गतं कर्तुं प्रपत्रं परिवर्तयन्तु, कोडः निम्नलिखितरूपेण भवति
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--表格css样式-->
<style>
.el-table .warning-row {
background: oldlace;
}
.el-table .success-row {
background: #f0f9eb;
}
</style>
</head>
<body>
<div id="app">
<!--3 从官网复制自己想要的组件代码-->
<!--表单代码-->
<el-form :inline="true" :model="brand" class="demo-form-inline">
<el-form-item label="当前状态">
<el-select v-model="brand.status" placeholder="当前状态">
<el-option label="1" value="启用"></el-option>
<el-option label="0" value="禁用"></el-option>
</el-select>
</el-form-item>
<el-form-item label="企业名称">
<el-input v-model="brand.companyName" placeholder="企业名称"></el-input>
</el-form-item>
<el-form-item label="品牌名称">
<el-input v-model="brand.brandName" placeholder="品牌名称"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">查询</el-button>
</el-form-item>
</el-form>
<!--表格代码-->
<template>
<el-table
:data="tableData"
style="width: 100%"
:row-class-name="tableRowClassName"
@selection-change="handleSelectionChange"><!--给表格添加handleSelectionChange方法-->
<!--给表格添加复选框-->
<el-table-column
type="selection">
</el-table-column>
<!--给表格添加序号-->
<el-table-column
type="index">
</el-table-column>
<el-table-column
prop="brandName"
label="品牌名称"
align="center">
</el-table-column>
<el-table-column
prop="companyName"
label="企业名称"
align="center">
</el-table-column>
<el-table-column
prop="ordered"
label="排序"
align="center">
</el-table-column>
<el-table-column
prop="status"
label="当前状态"
align="center">
</el-table-column>
<el-table-column
label="操作"
align="center">
<el-row>
<el-button type="primary">修改</el-button>
<el-button type="danger">删除</el-button>
</el-row>
</el-table-column>
</el-table>
</template>
</div>
<!--1 引入vue.js文件、element的index.css文件和index.js文件-->
<script src="js/vue.js" type="text/javascript" charset="UTF-8"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="element-ui/lib/index.js"></script>
<!--2 创建Vue核心对象-->
<script>
new Vue({
el : "#app",
//表格属性
methods: {
// 表单方法
onSubmit() {
console.log(this.brand);
},
// 复选框选中后执行的方法
handleSelectionChange(val) {
this.multipleSelection = val;
//测试与复选框关联的方法是否成功,测试完成后自行删除即可
console.log(this.multipleSelection)
},
// 表格方法
tableRowClassName({row, rowIndex}) {
if (rowIndex === 1) {
return 'warning-row';
} else if (rowIndex === 3) {
return 'success-row';
}
return '';
}
},
data() {
return {
// 表单数据
brand: {
status: '',
companyName: '',
brandName: ''
},
// 复选框数据
multipleSelection: [],
// 表格数据
tableData: [{
brandName: '小米',
companyName: '小米科技有限公司',
ordered: '10',
status: '启用'
}, {
brandName: '小米',
companyName: '小米科技有限公司',
ordered: '10',
status: '启用'
}, {
brandName: '小米',
companyName: '小米科技有限公司',
ordered: '10',
status: '启用'
}, {
brandName: '小米',
companyName: '小米科技有限公司',
ordered: '10',
status: '启用'
}, {
brandName: '小米',
companyName: '小米科技有限公司',
ordered: '10',
status: '启用'
}, {
brandName: '小米',
companyName: '小米科技有限公司',
ordered: '10',
status: '启用'
}]
}
}
})
</script>
</body>
</html>
Add बटन् नुत्वा संवादपेटिकाः, प्रपत्राणि च पॉप अप भवन्ति, अतः संवादपेटिकाः, प्रपत्राणि च निर्मातुं पूर्वं तान् योजयितुं आवश्यकम् ।批量删除
तथा新增
द्वौ बटनौ
Step8: 1.1. योजयतु批量删除
तथा新增
बटनं, संवादं योजयन्तु
आधिकारिकजालस्थले संवादपेटिकाघटकं अन्वेष्टुम् अत्र वयं संवादपेटिकायाः मूलभूतं उपयोगं उदाहरणरूपेण गृहीत्वा तस्य कोडं प्रतिलिखयामः ।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--表格css样式-->
<style>
.el-table .warning-row {
background: oldlace;
}
.el-table .success-row {
background: #f0f9eb;
}
</style>
</head>
<body>
<div id="app">
<!--3 从官网复制自己想要的组件代码-->
<!--表单代码-->
<el-form :inline="true" :model="brand" class="demo-form-inline">
<el-form-item label="当前状态">
<el-select v-model="brand.status" placeholder="当前状态">
<el-option label="1" value="启用"></el-option>
<el-option label="0" value="禁用"></el-option>
</el-select>
</el-form-item>
<el-form-item label="企业名称">
<el-input v-model="brand.companyName" placeholder="企业名称"></el-input>
</el-form-item>
<el-form-item label="品牌名称">
<el-input v-model="brand.brandName" placeholder="品牌名称"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">查询</el-button>
</el-form-item>
</el-form>
<!--批量删除和新增按钮-->
<el-row>
<el-button type="danger" plain>批量删除</el-button>
<el-button type="primary">新增</el-button>
</el-row>
<!--要弹出的对话框-->
<el-button type="text" @click="dialogVisible = true">点击打开 Dialog</el-button>
<el-dialog
title="提示"
:visible.sync="dialogVisible"
width="30%"
:before-close="handleClose"><!--before-close是为右上角x绑定方法用的属性-->
<!--对话框中的表单-->
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="dialogVisible = false">确 定</el-button>
</span>
</el-dialog>
<!--表格代码-->
<template>
<el-table
:data="tableData"
style="width: 100%"
:row-class-name="tableRowClassName"
@selection-change="handleSelectionChange"><!--给表格添加handleSelectionChange方法-->
<!--给表格添加复选框-->
<el-table-column
type="selection">
</el-table-column>
<!--给表格添加序号-->
<el-table-column
type="index">
</el-table-column>
<el-table-column
prop="brandName"
label="品牌名称"
align="center">
</el-table-column>
<el-table-column
prop="companyName"
label="企业名称"
align="center">
</el-table-column>
<el-table-column
prop="ordered"
label="排序"
align="center">
</el-table-column>
<el-table-column
prop="status"
label="当前状态"
align="center">
</el-table-column>
<el-table-column
label="操作"
align="center">
<el-row>
<el-button type="primary">修改</el-button>
<el-button type="danger">删除</el-button>
</el-row>
</el-table-column>
</el-table>
</template>
</div>
<!--1 引入vue.js文件、element的index.css文件和index.js文件-->
<script src="js/vue.js" type="text/javascript" charset="UTF-8"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="element-ui/lib/index.js"></script>
<!--2 创建Vue核心对象-->
<script>
new Vue({
el : "#app",
//表格属性
methods: {
// 表单方法
onSubmit() {
// 测试是否绑定成功:输出到浏览器控制台测试是否将表单数据封装到brand对象中
console.log(this.brand);
},
// 单击对话框右上角x时会弹出的确认关闭框,若不想要将其删除即可
handleClose(done) {
this.$confirm('确认关闭?')
.then(_ => {
done();
})
.catch(_ => {});
},
// 复选框选中后执行的方法
handleSelectionChange(val) {
this.multipleSelection = val;
//测试与复选框关联的方法是否成功,测试完成后自行删除即可
console.log(this.multipleSelection)
},
// 表格方法
tableRowClassName({row, rowIndex}) {
if (rowIndex === 1) {
return 'warning-row';
} else if (rowIndex === 3) {
return 'success-row';
}
return '';
}
},
data() {
return {
// 表单数据
brand: {
status: '',
companyName: '',
brandName: ''
},
// 添加数据的对话康初始状态太是否展示
dialogVisible: false,
// 复选框数据
multipleSelection: [],
// 表格数据
tableData: [{
brandName: '小米',
companyName: '小米科技有限公司',
ordered: '10',
status: '启用'
}, {
brandName: '小米',
companyName: '小米科技有限公司',
ordered: '10',
status: '启用'
}, {
brandName: '小米',
companyName: '小米科技有限公司',
ordered: '10',
status: '启用'
}, {
brandName: '小米',
companyName: '小米科技有限公司',
ordered: '10',
status: '启用'
}, {
brandName: '小米',
companyName: '小米科技有限公司',
ordered: '10',
status: '启用'
}, {
brandName: '小米',
companyName: '小米科技有限公司',
ordered: '10',
status: '启用'
}]
}
}
})
</script>
</body>
</html>
Step9: 1.1. संवादपेटिकायां एकं प्रपत्रं योजयन्तु, कोडः निम्नलिखितरूपेण भवति
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--表格css样式-->
<style>
.el-table .warning-row {
background: oldlace;
}
.el-table .success-row {
background: #f0f9eb;
}
</style>
</head>
<body>
<div id="app">
<!--3 从官网复制自己想要的组件代码-->
<!--表单代码-->
<el-form :inline="true" :model="brand" class="demo-form-inline">
<el-form-item label="当前状态">
<el-select v-model="brand.status" placeholder="当前状态">
<el-option label="1" value="启用"></el-option>
<el-option label="0" value="禁用"></el-option>
</el-select>
</el-form-item>
<el-form-item label="企业名称">
<el-input v-model="brand.companyName" placeholder="企业名称"></el-input>
</el-form-item>
<el-form-item label="品牌名称">
<el-input v-model="brand.brandName" placeholder="品牌名称"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">查询</el-button>
</el-form-item>
</el-form>
<!--批量删除和新增按钮-->
<el-row>
<el-button type="danger" plain>批量删除</el-button>
<el-button type="primary">新增</el-button>
</el-row>
<!--要弹出的对话框-->
<!--单击事件发生后会将dialogVisible属性值设置为true,此时对话框就会打开-->
<el-button type="text" @click="dialogVisible = true">点击打开 Dialog</el-button>
<el-dialog
title="编辑品牌"
:visible.sync="dialogVisible"
width="30%"
:before-close="handleClose"><!--before-close是为右上角x绑定方法用的属性-->
<!--对话框中的表单-->
<el-form ref="form" :model="form" label-width="80px">
<el-form-item label="品牌名称">
<el-input v-model="form.brandName"></el-input>
</el-form-item>
<el-form-item label="企业名称">
<el-input v-model="form.companyName"></el-input>
</el-form-item>
<el-form-item label="排序">
<el-input v-model="form.ordered"></el-input>
</el-form-item>
<el-form-item label="备注">
<el-input type="textarea" v-model="form.description"></el-input>
</el-form-item>
<el-form-item label="状态">
<el-switch v-model="form.status"></el-switch>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="addBrand">提交</el-button>
<el-button>取消</el-button>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="dialogVisible = false">确 定</el-button>
</span>
</el-dialog>
<!--表格代码-->
<template>
<el-table
:data="tableData"
style="width: 100%"
:row-class-name="tableRowClassName"
@selection-change="handleSelectionChange"><!--给表格添加handleSelectionChange方法-->
<!--给表格添加复选框-->
<el-table-column
type="selection">
</el-table-column>
<!--给表格添加序号-->
<el-table-column
type="index">
</el-table-column>
<el-table-column
prop="brandName"
label="品牌名称"
align="center">
</el-table-column>
<el-table-column
prop="companyName"
label="企业名称"
align="center">
</el-table-column>
<el-table-column
prop="ordered"
label="排序"
align="center">
</el-table-column>
<el-table-column
prop="status"
label="当前状态"
align="center">
</el-table-column>
<el-table-column
label="操作"
align="center">
<el-row>
<el-button type="primary">修改</el-button>
<el-button type="danger">删除</el-button>
</el-row>
</el-table-column>
</el-table>
</template>
</div>
<!--1 引入vue.js文件、element的index.css文件和index.js文件-->
<script src="js/vue.js" type="text/javascript" charset="UTF-8"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="element-ui/lib/index.js"></script>
<!--2 创建Vue核心对象-->
<script>
new Vue({
el : "#app",
//表格属性
methods: {
// 表单方法
onSubmit() {
// 测试是否绑定成功:输出到浏览器控制台测试是否将表单数据封装到brand对象中
console.log(this.brand);
},
// 单击对话框右上角x时会弹出的确认关闭框,若不想要将其删除即可
handleClose(done) {
this.$confirm('确认关闭?')
.then(_ => {
done();
})
.catch(_ => {});
},
//弹出的对话康中表单的添加方法
addBrand() {
},
// 复选框选中后执行的方法
handleSelectionChange(val) {
this.multipleSelection = val;
//测试与复选框关联的方法是否成功,测试完成后自行删除即可
console.log(this.multipleSelection)
},
// 表格方法
tableRowClassName({row, rowIndex}) {
if (rowIndex === 1) {
return 'warning-row';
} else if (rowIndex === 3) {
return 'success-row';
}
return '';
}
},
data() {
return {
// 表单数据
brand: {
status: '',
companyName: '',
brandName: ''
},
// 新增按钮弹出的对话框初始状态是否展示的标记,默认为false
dialogVisible: false,
form: {
brandName: '',
companyName: '',
ordered: '',
description: '',
status: false
},
// 复选框数据
multipleSelection: [],
// 表格数据
tableData: [{
brandName: '小米',
companyName: '小米科技有限公司',
ordered: '10',
status: '启用'
}, {
brandName: '小米',
companyName: '小米科技有限公司',
ordered: '10',
status: '启用'
}, {
brandName: '小米',
companyName: '小米科技有限公司',
ordered: '10',
status: '启用'
}, {
brandName: '小米',
companyName: '小米科技有限公司',
ordered: '10',
status: '启用'
}, {
brandName: '小米',
companyName: '小米科技有限公司',
ordered: '10',
status: '启用'
}, {
brandName: '小米',
companyName: '小米科技有限公司',
ordered: '10',
status: '启用'
}]
}
}
})
</script>
</body>
</html>
Step10 : 1.1. पदानि यथा सन्ति तथा कोडः यथा अस्ति
新增
बटनबन्धन क्लिक् इवेण्ट्, यावत् एकं क्लिक्新增
बटन् संवादप्रपत्रं पॉप् अप करोति提交
बटनं प्रति बाध्यस्य क्लिक् इवेण्ट् इत्यस्य अनुरूपं मेथड्: मेथड् परिवर्तयतुaddBrand
, यावत् बटनं क्लिक् भवति तावत् संवादप्रपत्रं स्वयमेव प्रस्तूय्यते ।确定
、取消
बटनं विलोपयन्तु取消
बटनं क्लिक् इवेण्ट् इत्यनेन सह बद्धं भवति यावत् बटन् क्लिक् भवति तावत् संवादरूपं अन्तर्धानं भवति ।form
(वर्तमानेmodel="form"
), तस्य विशेषतामूल्यं परिवर्तयन्तुbrand
, तथा ब्राण्ड् ऑब्जेक्ट् इत्यस्मिन् दत्तांशं सम्पूर्णं कुर्वन्तु<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--表格css样式-->
<style>
.el-table .warning-row {
background: oldlace;
}
.el-table .success-row {
background: #f0f9eb;
}
</style>
</head>
<body>
<div id="app">
<!--3 从官网复制自己想要的组件代码-->
<!--表单代码-->
<el-form :inline="true" :model="brand" class="demo-form-inline">
<el-form-item label="当前状态">
<el-select v-model="brand.status" placeholder="当前状态">
<el-option label="1" value="启用"></el-option>
<el-option label="0" value="禁用"></el-option>
</el-select>
</el-form-item>
<el-form-item label="企业名称">
<el-input v-model="brand.companyName" placeholder="企业名称"></el-input>
</el-form-item>
<el-form-item label="品牌名称">
<el-input v-model="brand.brandName" placeholder="品牌名称"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">查询</el-button>
</el-form-item>
</el-form>
<!--批量删除和新增按钮-->
<el-row>
<el-button type="danger" plain>批量删除</el-button>
<!--新增按钮绑定单击事件:只要一单击`新增`按钮就弹出对话框表单-->
<el-button type="primary" plain @click="dialogVisible = true">新增</el-button>
</el-row>
<!--要弹出的对话框-->
<!--单击事件发生后会将dialogVisible属性值设置为true,此时对话框就会打开-->
<el-dialog
title="编辑品牌"
:visible.sync="dialogVisible"
width="30%"
:before-close="handleClose"><!--before-close是为右上角x绑定方法用的属性-->
<!--对话框中的表单-->
<el-form ref="form" :model="brand" label-width="80px">
<el-form-item label="品牌名称">
<el-input v-model="brand.brandName"></el-input>
</el-form-item>
<el-form-item label="企业名称">
<el-input v-model="brand.companyName"></el-input>
</el-form-item>
<el-form-item label="排序">
<el-input v-model="brand.ordered"></el-input>
</el-form-item>
<el-form-item label="备注">
<el-input type="textarea" v-model="brand.description"></el-input>
</el-form-item>
<el-form-item label="状态">
<!--将状态开关值设为1、0-->
<el-switch v-model="brand.status" active-value="1" inactive-value="0"></el-switch>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="addBrand">提交</el-button>
<el-button @click="dialogVisible = false">取消</el-button>
</el-form-item>
</el-form>
</el-dialog>
<!--表格代码-->
<template>
<el-table
:data="tableData"
style="width: 100%"
:row-class-name="tableRowClassName"
@selection-change="handleSelectionChange"><!--给表格添加handleSelectionChange方法-->
<!--给表格添加复选框-->
<el-table-column
type="selection">
</el-table-column>
<!--给表格添加序号-->
<el-table-column
type="index">
</el-table-column>
<el-table-column
prop="brandName"
label="品牌名称"
align="center">
</el-table-column>
<el-table-column
prop="companyName"
label="企业名称"
align="center">
</el-table-column>
<el-table-column
prop="ordered"
label="排序"
align="center">
</el-table-column>
<el-table-column
prop="status"
label="当前状态"
align="center">
</el-table-column>
<el-table-column
label="操作"
align="center">
<el-row>
<el-button type="primary">修改</el-button>
<el-button type="danger">删除</el-button>
</el-row>
</el-table-column>
</el-table>
</template>
</div>
<!--1 引入vue.js文件、element的index.css文件和index.js文件-->
<script src="js/vue.js" type="text/javascript" charset="UTF-8"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="element-ui/lib/index.js"></script>
<!--2 创建Vue核心对象-->
<script>
new Vue({
el : "#app",
//表格属性
methods: {
// 表单方法
onSubmit() {
// 测试是否绑定成功:输出到浏览器控制台测试是否将表单数据封装到brand对象中
console.log(this.brand);
},
// 单击对话框右上角x时会弹出的确认关闭框,若不想要将其删除即可
handleClose(done) {
this.$confirm('确认关闭?')
.then(_ => {
done();
})
.catch(_ => {});
},
//弹出的对话框中单击提交按钮后表单的添加方法
addBrand() {
console.log(this.brand);
},
// 复选框选中后执行的方法
handleSelectionChange(val) {
this.multipleSelection = val;
//测试与复选框关联的方法是否成功,测试完成后自行删除即可
console.log(this.multipleSelection)
},
// 表格方法
tableRowClassName({row, rowIndex}) {
if (rowIndex === 1) {
return 'warning-row';
} else if (rowIndex === 3) {
return 'success-row';
}
return '';
}
},
data() {
return {
// 品牌模型数据
brand: {
id: '',
brandName: '',
companyName: '',
status: '',
ordered: '',
description: ''
},
// 新增按钮弹出的对话框初始状态是否展示的标记,默认为false
dialogVisible: false,
form: {
brandName: '',
companyName: '',
ordered: '',
description: '',
status: false
},
// 复选框数据
multipleSelection: [],
// 表格数据
tableData: [{
brandName: '小米',
companyName: '小米科技有限公司',
ordered: '10',
status: '启用'
}, {
brandName: '小米',
companyName: '小米科技有限公司',
ordered: '10',
status: '启用'
}, {
brandName: '小米',
companyName: '小米科技有限公司',
ordered: '10',
status: '启用'
}, {
brandName: '小米',
companyName: '小米科技有限公司',
ordered: '10',
status: '启用'
}, {
brandName: '小米',
companyName: '小米科技有限公司',
ordered: '10',
status: '启用'
}, {
brandName: '小米',
companyName: '小米科技有限公司',
ordered: '10',
status: '启用'
}]
}
}
})
</script>
</body>
</html>
चरण११ : १. पेजिंग् घटकं अन्वेष्टुं आधिकारिकजालस्थले गत्वा तत्सम्बद्धं कोडं प्रतिलिख्य तदनुरूपं परिवर्तनं कुर्वन्तु कोडः निम्नलिखितरूपेण अस्ति ।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--表格css样式-->
<style>
.el-table .warning-row {
background: oldlace;
}
.el-table .success-row {
background: #f0f9eb;
}
</style>
</head>
<body>
<div id="app">
<!--3 从官网复制自己想要的组件代码-->
<!--表单代码-->
<el-form :inline="true" :model="brand" class="demo-form-inline">
<el-form-item label="当前状态">
<el-select v-model="brand.status" placeholder="当前状态">
<el-option label="1" value="启用"></el-option>
<el-option label="0" value="禁用"></el-option>
</el-select>
</el-form-item>
<el-form-item label="企业名称">
<el-input v-model="brand.companyName" placeholder="企业名称"></el-input>
</el-form-item>
<el-form-item label="品牌名称">
<el-input v-model="brand.brandName" placeholder="品牌名称"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">查询</el-button>
</el-form-item>
</el-form>
<!--批量删除和新增按钮-->
<el-row>
<el-button type="danger" plain>批量删除</el-button>
<!--新增按钮绑定单击事件:只要一单击`新增`按钮就弹出对话框表单-->
<el-button type="primary" plain @click="dialogVisible = true">新增</el-button>
</el-row>
<!--要弹出的对话框-->
<!--单击事件发生后会将dialogVisible属性值设置为true,此时对话框就会打开-->
<el-dialog
title="编辑品牌"
:visible.sync="dialogVisible"
width="30%"
:before-close="handleClose"><!--before-close是为右上角x绑定方法用的属性-->
<!--对话框中的表单-->
<el-form ref="form" :model="brand" label-width="80px">
<el-form-item label="品牌名称">
<el-input v-model="brand.brandName"></el-input>
</el-form-item>
<el-form-item label="企业名称">
<el-input v-model="brand.companyName"></el-input>
</el-form-item>
<el-form-item label="排序">
<el-input v-model="brand.ordered"></el-input>
</el-form-item>
<el-form-item label="备注">
<el-input type="textarea" v-model="brand.description"></el-input>
</el-form-item>
<el-form-item label="状态">
<!--将状态开关值设为1、0-->
<el-switch v-model="brand.status" active-value="1" inactive-value="0"></el-switch>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="addBrand">提交</el-button>
<el-button @click="dialogVisible = false">取消</el-button>
</el-form-item>
</el-form>
</el-dialog>
<!--表格代码-->
<template>
<el-table
:data="tableData"
style="width: 100%"
:row-class-name="tableRowClassName"
@selection-change="handleSelectionChange"><!--给表格添加handleSelectionChange方法-->
<!--给表格添加复选框-->
<el-table-column
type="selection">
</el-table-column>
<!--给表格添加序号-->
<el-table-column
type="index">
</el-table-column>
<el-table-column
prop="brandName"
label="品牌名称"
align="center">
</el-table-column>
<el-table-column
prop="companyName"
label="企业名称"
align="center">
</el-table-column>
<el-table-column
prop="ordered"
label="排序"
align="center">
</el-table-column>
<el-table-column
prop="status"
label="当前状态"
align="center">
</el-table-column>
<el-table-column
label="操作"
align="center">
<el-row>
<el-button type="primary">修改</el-button>
<el-button type="danger">删除</el-button>
</el-row>
</el-table-column>
</el-table>
</template>
<!--分页代码-->
<template>
<div class="block">
<!--
current-page 当前所在页
page-sizes 定义选择每页显示的条数
page-size 每页显示的条目数
total 设置总共的页面数
background 添加背景色
-->
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[10, 20, 30, 40]"
:page-size="10"
background
layout="total, sizes, prev, pager, next, jumper"
:total="1000">
</el-pagination>
</div>
</template>
</div>
<!--1 引入vue.js文件、element的index.css文件和index.js文件-->
<script src="js/vue.js" type="text/javascript" charset="UTF-8"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="element-ui/lib/index.js"></script>
<!--2 创建Vue核心对象-->
<script>
new Vue({
el : "#app",
//表格属性
methods: {
// 表单方法
onSubmit() {
// 测试是否绑定成功:输出到浏览器控制台测试是否将表单数据封装到brand对象中
console.log(this.brand);
},
// 单击对话框右上角x时会弹出的确认关闭框,若不想要将其删除即可
handleClose(done) {
this.$confirm('确认关闭?')
.then(_ => {
done();
})
.catch(_ => {});
},
//弹出的对话框中单击提交按钮后表单的添加方法
addBrand() {
console.log(this.brand);
},
// 复选框选中后执行的方法
handleSelectionChange(val) {
this.multipleSelection = val;
//测试与复选框关联的方法是否成功,测试完成后自行删除即可
console.log(this.multipleSelection)
},
// 表格方法
tableRowClassName({row, rowIndex}) {
if (rowIndex === 1) {
return 'warning-row';
} else if (rowIndex === 3) {
return 'success-row';
}
return '';
},
// 分页方法
handleSizeChange(val) {
console.log(`每页 ${val} 条`);
},
// 分页方法
handleCurrentChange(val) {
console.log(`当前页: ${val}`);
}
},
data() {
return {
// 品牌模型数据
brand: {
id: '',
brandName: '',
companyName: '',
status: '',
ordered: '',
description: ''
},
// 新增按钮弹出的对话框初始状态是否展示的标记,默认为false
dialogVisible: false,
form: {
brandName: '',
companyName: '',
ordered: '',
description: '',
status: false
},
// 复选框数据
multipleSelection: [],
// 表格数据
tableData: [{
brandName: '小米',
companyName: '小米科技有限公司',
ordered: '10',
status: '启用'
}, {
brandName: '小米',
companyName: '小米科技有限公司',
ordered: '10',
status: '启用'
}, {
brandName: '小米',
companyName: '小米科技有限公司',
ordered: '10',
status: '启用'
}, {
brandName: '小米',
companyName: '小米科技有限公司',
ordered: '10',
status: '启用'
}, {
brandName: '小米',
companyName: '小米科技有限公司',
ordered: '10',
status: '启用'
}, {
brandName: '小米',
companyName: '小米科技有限公司',
ordered: '10',
status: '启用'
}],
// 分页数据:当前所在页
currentPage: 4
}
}
})
</script>
</body>
</html>