Vue+Element实时局部刷新表格某一行的样式和属性值（带源码）

最新推荐文章于 2024-07-21 21:41:29 发布

BoBoAn0254

最新推荐文章于 2024-07-21 21:41:29 发布

阅读量8.4k

点赞数

分类专栏： vue Web前端 JS 文章标签： vue javascript

本文链接：https://blog.csdn.net/Swampis/article/details/106408213

版权

Web前端同时被 3 个专栏收录

12 篇文章 0 订阅

订阅专栏

10 篇文章 0 订阅

订阅专栏

vue

8 篇文章 0 订阅

订阅专栏

使用场景分析，要求提交数据表中修改的某行数据，实时刷新该行数据的状态，该行的某条属性是根据条件渲染的。

el-table部分：

<el-table-column label="关联状态" width="100">
   <template slot-scope="scope"> 
       <el-tag
          :type="scope.row.status === 'true' ? 'success' : 'info'"
          disable-transitions>{{scope.row.status === 'true' ? '显示' : '禁止'}}                                                        
       </el-tag>      
   </template>
</el-table-column>

js部分

//手动改变表单值
this.tableData[index].tag = !this.tableData[index].tag
//利用vue的$set方法进行更新表格数据
this.$set(this.tableData, index, row);

源码部分

 <template>
      <div>
        <div v-show="tableShow" class="reltable">
          <el-table ref="filterTable" :data="tableData" style="width: 100%;">
            <el-table-column
              prop="date"
              label="日期"
              sortable
              width="180"
              column-key="date" 
            >
            </el-table-column>
            <el-table-column prop="name" label="姓名" width="180">
            </el-table-column>
            <el-table-column prop="address" label="地址" :formatter="formatter">
            </el-table-column>
            <el-table-column prop="tag" label="标签" width="100">
              <template slot-scope="scope">
                <el-tag
                  :type="scope.row.tag === 'true' ? 'success' : 'info'"
                  disable-transitions
                  >{{scope.row.tag==='true' ? '家':'公司'}}</el-tag
                >
              </template>
            </el-table-column>
            <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>
        </div>
      </div>
    </template>

    <script>
      export default {
        name: 'Table',
        data() {
          return {
      
            tableShow: false,
            tableData: [
              {
                date: '2016-05-03',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄',
              },
              {
                date: '2016-05-02',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄',
                tag: 'false',
              },
              {
                date: '2016-05-04',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄',
                tag: 'true',
              },
              {
                date: '2016-05-01',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄',
                tag: 'false',
              },
              {
                date: '2016-05-08',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄',
                tag: 'true',
              },
              {
                date: '2016-05-06',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄',
                tag: 'false',
              },
              {
                date: '2016-05-07',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄',
                tag: 'true',
              },
            ],
          }
        },
        created: function () {},

        methods: {
          handleEdit(index, row) {
            this.tableData[index].tag = !this.tableData[index].tag；
            this.$set(this.tableData, index, row);
            console.log(index, row)
          },
          handleDelete(index, row) {
            console.log(index, row)
          },
        },
      }
    </script>
    <style scoped></style>