新增编辑组件共用

最新推荐文章于 2022-11-17 13:49:24 发布

迈动888

最新推荐文章于 2022-11-17 13:49:24 发布

阅读量334

点赞数

文章标签： elementui vue.js javascript

本文链接：https://blog.youkuaiyun.com/maidong888/article/details/125105549

版权

本文介绍如何在Vue.js应用中利用ElementUI组件库，通过数据交互和样式管理实现编辑组件的共享与复用，提高代码的可维护性和效率。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

结构

<template>
  <div>
    <el-button @click="dialogVisSync()" class="nuv-el-but">新增</el-button>
    <el-table border :data="tableData">
      <el-table-column type="selection"></el-table-column>
      <el-table-column
        type="index"
        prop="id"
        label="序号"
        :index="indexMethod"
      ></el-table-column>
      <el-table-column
        label="创建时间"
        prop="createTime"
        width="170"
        align="center"
      ></el-table-column>

      <el-table-column
        label="防疫方式"
        prop="typeKey"
        align="center"
      ></el-table-column>

      <el-table-column label="是否内置" prop="isLock" align="center">
        <template slot-scope="scope">
          <span>{
  { scope.row.isLock == '1' ? '是' : '否' }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="字典名称"
        prop="typeValue"
        align="center"
      ></el-table-column>

      <el-table-column label="状态" prop="states" align="center">
        <template slot-scope="scope">
          <span>{
  { statesLi(scope.row.states) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" prop="" align

最低0.47元/天解锁文章