vue.js使用心得——el-select，el-table数据处理，css样式穿透以及增删改查_el-select request

一、element-ui控件

组件用的是element-ui，因为它和vue切合度最好。

el-select （选择框）

<el-select v-model="">
    <el-option v-for=""
    :label=""
    :key=""
    :value=""
    </el-option>
</el-select>

以上是一个选择框的基本结构。:label(即v-bind:label="")等同于在<el-option>标签之间写{ {}}，但也不完全一样，:label还有一个功能，就是在select框内显示初始值，因为是单向绑定数据。value表示的是select框展开后的每一选项的值。v-model和value实现双向绑定。总而言之，当用户点击选择框选项时，vue通过用户点击的选项的索引值，先改变value与label,因为v-model与value双向绑定，所以value是什么值，v-model就对应是什么值，这样v-model中对应的data1就改变了。

<template>
<el-select v-model="data1">
    <el-option v-for="item in options"
    :label="item.text"
    :key="item.value"
    :value="item.value"
    </el-option>
</el-select>
</template>
<script>
export default{
    data(){
        return{
            data1:1,
            options:[
            {value:1,text:"A"},
            {value:2,text:"B"},
            {value:3,text:"C"}
</script>

以上这个例子，因为data1初始值为1，所以:value的值为1，即:label显示的item.text为“A”,想要获取value值很容易，只要事件里加个console.log(data1),你就能在控制台里看到你选中元素的value值了。我刚才想了想，我不但想要获得value的值，还想获得text的值。。但是v-model只能绑定value中的值，也就是说我只能从v-model中获取一个数字。所以我想到了一个方法。

<el-select v-model="data1">
    <el-option v-for="item in options"
    :label="item.text"
    :key="item.value"
    :value="item.value+' '+item.text"
    </el-option>
</el-select>

感觉有点傻，但是这样返回的data1就是1 A;2 B;3 C了，将得到的数据用正则表达式处理一下就好了吧，哈哈哈哈，不过这样赋初值不好赋，所以最好还是别一块取了，别的方法也可以，比如说再定义一个具有键值的数组，让<数组名>[1]="A",这样似乎是最好的办法。

一般，选择框离不开联动。在这里介绍一下两个选择框的联动。原来用C#实现表单联动，option得一个一个往里面加，拿vue的联动甚是简单啊！因为已经实现了数据绑定，所以添加一个事件，当select1中选择值等于x时，select2绑定的options数据整体发生变化，写一个数组即可实现。

el-table （表格）

看这个之前，你需要一个API。因为这个例子前端和后台分离，所以我衔接的是Django REST framework的API。我也用它举例。

看一下这张图。显然这是个json格式的数据列表。我现在只留下了title和id,下面我会用它与我的表格进行连接。

这是表格代码。

<template>
<el-table 
        :data="tableData"
        <el-table-column
        label="标题">
        <template slot-scope="scope">
            <span>{{ scope.row.title}}</span>
        </template>
        </el-table-column>
        <el-table-column
        label="ID">
        <template slot-scope="scope">
            <span>{{ scope.row.id}}</span>
        </template>
        </el-table-column>
        <el-table-column>
            <template slot-scope="scope">
                <el-button @click="TellMeId(scope.row.id)">TellMe</el-button> 
            </template>
        </el-table-column>
</el-table>
</template>
<script>
export default{
    data(){
        return{
           tableData:[] 
    methods:{
        TellMeId(num){
            console.log(num)
</script>

解释一下我的代码。我这个表格有三列，分别是标题、ID和一个写着TellMe的按钮。这个按钮的作用就是告诉我表格该行内容的id。接着我要用Axios(一个类似于jQuery中ajax的东西)来获取我API中的数据。在后面的事件中还会有详细说明。但前提是，你已经配好了Axios。

<template>
<el-table 
        :data="tableData"
        <el-table-column
        label="标题">
        <template slot-scope="scope">
            <span>{{ scope.row.title}}</span>
        </template>
        </el-table-column>
        <el-table-column
        label="ID">
        <template slot-scope="scope">
            <span>{{ scope.row.id}}</span>
        </template>
        </el-table-column>
        <el-table-column>
            <template slot-scope="scope">
                <el-button @click="TellMeId(scope.row.id)">TellMe</el-button> 
            </template>
        </el-table-column>
</el-table>
</template>
<script>
export default{
    data(){
        return{
           tableData:[] 
    methods:{
        TellMeId(num){
            console.log(num)
        init(){
    mounted(){
        this.init()
    //mounted--钩子函数，一来到该页面即执行，这里面让其执行init()函数。
</script>

上面的init()函数还是空的，我们让它使用Axios从那个API上获取我想要的数据。init()函数，我这样写。

init(){
    axios.get('/user',{
        params:{
            xx:'',
            xxx:''
            xxxx: sessionStorage.getItem('XXXX')
            //可以写一个字符串常量也可以是一个函数或表达式。
            //params的数量有多少看你的，实际上就是在网址后面携带这些参数。
            //比如说我这样加得到的结果就是http://xxxxx/user?xx=''&xxx=''&xxxx="......"
            //我的sessionStorage.getItem意思是我已经存了一个叫XXXX名字的session，现在将其取出。           
    }).then(request=>{
            var Data=request.data//这句话意思就是请求数据。
            tableData=Data.data//上去看图！！！看到写在title,id前面的data了么？得到的就是它
我先是带着这些参数来到了user这个网站上（此网站就是个API接口），接着（then），我获取了这个API的数据，取出了它的data，放在了我的tableData里面。这个时候，你再打开你的项目，你已经能看到表格上密密麻麻的数据了，因为就在刚才，tableData中的数据找到了我的scope.row.title和scope.row.id，并且根据title,id这两个名称（你可以在上面那个白色图中看到），为表格中的每一行分配了数据，这个时候，你点一下按钮吧，F12打开控制台，就能分别看到每一行数据对应的id了。el-table就说到这里。 
那么其他的控件也感觉没有说的必要了，自己再去百度一下吧 
二、CSS样式（用scoped覆盖原css样式） 
vue中的css样式设定基本上跟html相同，元素中加入style="",或加入class="",class中的样式在<style>中定义，其语法与css相同。 
<template>
</template>
<style>
//css写入位置
</style>
<script>
</script> 
值得一提的是，在于element-ui的结合中，我们往往会觉得element-ui控件大小啊或者颜色字体等等样式不合适，那么我们需要对其进行样式穿透。但是样式穿透也是偶尔，比如下面这个代码，并不需要进行所谓的穿透，我可以通过style改变输入框内字体的大小。 
<el-input
v-model="Text"
style="font-size:20px;"
></el-input> 
el-input这个控件是一个<div>与<input>的组合，在F12下它变成了这个样子。 
<div class="el-input">
    <input autocomplete="off" type="text" rows="2" validateevent="true" 
     class="el-input__inner"/>
人工加入的style改变的是表层元素，也就是说是在<div>标签中加入了style,而不是在<input>中加入style。那么什么时候加入style有作用，什么时候加入style无用呢？ 
其实 <div>中加入的style使得<div>内部包裹的元素的字体，字号大小发生改变，即此时，<div>中的style覆盖了input中的style。所以当<div>与<input>属性不冲突的时候我可以直接加style进行覆盖。但是发生冲突的时候。比如说<div>中有height这个样式属性,<input>中也有，这个时候我想更改input框的大小，就必须进行样式的内部穿透。不然修改的就是div块状元素的大小。 
（切记，element-ui添加style或class只修改表层元素） 
内部穿透代码： 
<style scoped>
.inputCSS >>> .el-input__inner{
    height:40px !important;
</style>
<style>
//书写普通的css
</style> 
最好加入important,具有更高的优先级。如何找到需要覆盖的css样式？打开node_modules，找到_element-ui@1.4.13@element-ui，点进去打开lib文件夹下theme-default中的input.css，这是el-input默认样式,然后根据自己想要的功能查找对应css，比如这个例子中我会用Ctrl-F搜索height,找到对应的css（有时这是个漫长的过程），之后覆盖。（新样式 和 原样式 名字不能相同，如不能.el-textarea__inner >>> .el-textarea__inner这样会出错） 
查看如何覆盖时，最好的办法是F12查看后台渲染，找到真正的内层元素！！ 
（1）this.$router.push带参数跳转内链页面 
this.$router.push不可跳转外链，必须先在router中的index.js中进行配置。配置过程略。 
例子：（两种方式也有很大区别，第一种参数不会写在你网页上方的url中，第二种会以?token=XXXX&id=xxxx的方式连接在url后面） 
//它有两种传参方式。
//第一种
//（传数据）
this.$router.push({name: '<写router中配置的name>',
                   params: {
                            token: XXXX,
                            id:xxxx
//（取数据）
this.$route.params.id;
this.$route.params.token;     //一般来说，$router后接方法，$route后接属性。
//第二种
//(传数据)
this.$router.push({path: '<写router中配置的path>',
                   query: {
                            token: XXXX,
                            id:xxxx
//(取数据)
this.$route.query.id;
this.$route.query.token;  
（2）Axios的增删改查 
前后端分离，默契很重要！看这个之前，你先需要一个前后端分离后的中间产物API 
在我做前端的时候，在这上面花的时间最长。有的时候我前端修改新增数据，跑出来一个500 internet server error，我检查代码的语法感觉都是对的，（自动忽略我把method写成methods那个智商被狗吃了的错误。）但数据就是put post不上去，我又怀疑过服务器的跨域问题，但最终也没能解决。后来发现是我的数据传输格式问题。API中要求是int类型，我却传字符串类型等等。（所以说即便错误信息是服务器错误，也有可能是前端问题） 
因为后台数据库不是我写的，API也不是我生成的，我就简单说说前端代码格式。 
axios.get('<api url>',{
        params:{
            xx:'',
            xxx:'' //如登录信息
   }).then(request=>{
            var Data=request.data
            <变量>=Data.<api中的键>
axios.request(
                url:"",
                params:{//url上要携带的参数 按照键 值写好
                method:'POST',
                data:{//要新增的数据 按照键 值写好
                ).then(response=>{
                    //新增成功传回来的信息。
                    this.$message({message:response.data.msg, type:'success'})
axios.request(
                url:"",
                params:{//url上要携带的参数 按照键 值写好
                method:'PUT',
                data:{//要修改的数据 按照键 值写好 必须写全（没改的也写）！！
                ).then(response=>{
                    //新增成功传回来的信息。
                    this.$message({message:response.data.msg, type:'success'})
this.$confirm('即将删除',
              '提示',
                confirmButtonText:'确定',
                cancelButtonText:'取消',
                type:'warning'
                }).then(()=>{
                    axios.delete('<url>',
                                  {params:{//想要删除的数据 如 id:''
                        ).then(response=>{
                              this.$message({message: response.data.msg, type : 'success'})
                }).catch(()=>{
                        this.$message({
                            type:'info',
                            message:'删除取消'
以上是一个带有提示框的删除数据代码，点击取消或者×都被catch捕捉到。给出信息。 
前端的增删改查最需要注意的就是提交数据的数量及格式，格式一定要和数据库存储格式相同。 
这个假期懂得了很多，但也不能说完全明白了其原理。比如我对它独具特色的生命周期了解的并不深入，大多数事件的添加也是用的element-ui里的说明，很少自己用v-bind,v-on绑定数据加入事件，也很少使用v-for,v-if这些，更多使用的是语法糖。觉得自己以后还可以更加深入地去理解下它的原理方面的知识。
                        这个假期接触了网页前端的又一个利器，vue.js,它的主要特点在于对数据的双向绑定。想想之前用最原始的js的时候，我们更改页面上的数据，经常会用到InnerHTML，getElementById的代码，它实际上是在对DOM元素进行添加或修改，包括jQuery,也是通过查找页面源代码中的DOM标签，达到了动态效果的实现，当我们确定要对页面上某一元素进行修改的时候，会用id或name 进行元素...
				为了实现功能，我想在表格的每一行的对应列都添加一个下拉框Select,如图，但是使用官方文档的时候，会出现v-model不起作用，或者说是循环渲染之后，在一个地方选择，会所有绑定的地方都变成一样，是因为此时所有的下拉框的v-model绑定的都是同一个value
先看错误的代码：
<el-table-column label="类型">
            <el-select
            v-model="value"
            placeholder="请选
&lt;el-table @selection-change="changeFun"&gt;
    &lt;el-table-column type="selection"&gt;
    &lt;/el-table-column&gt;
&lt;/el-table&gt;
&lt;script&gt;
    data () {
        return {
				最近在工作中遇到一个问题，需要在表格中实现数据可编辑状态，具体情况是需要在单元格里加入下拉框；并且每个下拉框的数组数据是不一样的，具体是根据当前行前面数据的id查询而来，前面的是数据是动态生成的，后面的下拉框数据也是根据id动态生成的，内容不同；有点类似于树形二级状态，后面的下拉框数据来源并没有在前面内容里，而是另外一个接口查询，具体操作如下：
HTML代码：
1.在处理人列加入一个下拉框模板，其中v-model必须要scope.row.proJbruserValue来绑定，意思是这个值绑定到当前行所选中的人；如果直接绑定proJbruserValue，将不能进行差异化选择，(这里scope
4.js请求，后端接口，需要传递的数据格式，对象数组——appointmentUnitRecord_options1：
[ {"label": "培训教室","value": "教学"},
 {"label": "考试大厅", "value": "考试" },
{"label": "共享自习室", "value": "培训" },
{"lab...
				el-table 是一个基于 Element UI 的表格组件，而 el-select 是 Element UI 提供的下拉选择框组件。在 el-table 中实现 el-select 的增、改、删、查操作，需要对 el-table 的数据进行操作，并且在 el-table 的列中渲染 el-select 组件。
1. 增加操作：
   - 在 el-table 的数据源中添加一条数据，例如使用数组的 push 方法或者 Vue 的 $set 方法。
   - 在 el-table 的列定义中，使用 slot-scope 来自定义渲染该列的内容，并在其中使用 el-select 组件。
2. 修改操作：
   - 找到要修改的数据在数据源中的索引位置。
   - 更新该索引位置上的数据。
   - 在 el-table 的列定义中，使用 slot-scope 来自定义渲染该列的内容，并在其中使用 el-select 组件。
3. 删除操作：
   - 找到要删除的数据在数据源中的索引位置。
   - 使用数组的 splice 方法或者 Vue 的 $delete 方法删除该索引位置上的数据。
4. 查询操作：
   - 根据需要，可以通过 el-table 的 filter-method 或者自定义筛选方法来实现查询功能。
   - 在 el-select 组件中设置好查询条件，通过监听 el-select 的 change 事件或者使用 v-model 来获取用户选择的查询条件。
   - 在 el-table 的列定义中，使用 filter-method 属性来指定过滤方法。
需要注意的是，以上提到的操作都是基于 Vue.js 和 Element UI 的使用方法。具体的实现方式可以参考 Element UI 的官方文档以及 Vue.js 的文档。
                    CSDN-Ada助手: 
                    非常感谢您分享解决Visual Studio Installer双击无反应的问题的经验，这对我们这些初学者来说非常有帮助。恭喜您写了第8篇博客，希望您能继续分享更多有价值的经验和知识。下一步的创作建议可以考虑探讨一些实践中遇到的问题和解决方法，这将使您的博客更加实用和有趣。再次感谢您的分享。
CSDN 会根据你创作的博客的质量，给予优秀的博主博客红包奖励。请关注 https://bbs.csdn.net/forums/csdnnews?typeId=116148&utm_source=csdn_ai_ada_blog_reply8 看奖励名单。