vue2中如何封装一个动态的el-table组件?

Question

el-table中的由数据列与操作列组成,数据列可以正常的绑定,现在的问题是操作列的中的一些操作按钮会根据数据列中的某列内容来判断是否显示,不知如何编写?

<template>
    <div>
      <el-table  :data="tableData" > 
        <el-table-column v-for="(value,index) in tableCol" :key="index"
                         :prop="value.prop"
                         :label="value.label"
                         :width="value.width">
           
        </el-table-column>
        <!--基础操作-->
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
                 type="text" 
                 v-for="(value,index) in operator" 
                 @click="value.click(scope.row, value)" 
                   :key="index">
              {{ value.text }}
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </template>

tableData的内容为:
[
{hao:'1',zt:'1'},
{hao:'1',zt:'2'},
{hao:'1',zt:'3'},
]

tableCol的内容为:[
{
          prop: "hao",
          label: "号码",
          width: "160px",
          align: "center",
          fixed: false,
        },
        {
          prop: "zt",
          label: "状态",
          width: "160px",
          align: "center",
          fixed: false,
        }, 
      ]
operator: [{
          text: "详情",
          type:'info',
          icon: "el-icon-setting",
          click: (row, col, cellValue) => {
            return this.xiaFa(row);
          },
        },
         {
           text: "编辑",
            icon: "el-icon-edit",
          click: (row, col, cellValue) => {
            return this.editRow(row);
           },
        },
         {
         text: "删除",
         icon: "el-icon-delete",
          click: (row, col, cellValue) => {
          return this.delRow(row);
            },
        },
      ],

问题:当一行的zt值不同时,opeartor中操作按钮显示与隐藏?难点在于每行zt值仅影响不行!

Answer 1

【以下回答由 GPT 生成】

你可以通过在操作列的slot-scope中使用v-if来根据数据列的内容来确定是否显示操作按钮。具体步骤如下：

1. 在操作按钮的v-for循环中，添加一个条件判断，判断该操作按钮是否要显示。条件可以根据数据列中的某个属性来确定。例如，如果要根据tableData中的zt属性来判断是否显示操作按钮，可以使用v-if="scope.row.zt === '1'"来判断。

2. 这样就可以根据数据列的内容来动态显示或隐藏操作按钮了。完整代码如下：

<template>
  <div>
    <el-table :data="tableData">
      <el-table-column v-for="(value, index) in tableCol" :key="index"
                       :prop="value.prop"
                       :label="value.label"
                       :width="value.width">
      </el-table-column>
      <!--基础操作-->
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
               type="text"
               v-for="(value, index) in operator"
               @click="value.click(scope.row, value)"
               :key="index"
               v-if="scope.row.zt === '1'">
            {{ value.text }}
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

这样，根据tableData中的zt属性的值，操作列中的操作按钮将根据需要显示或隐藏。

【相关推荐】

• 这有个类似的问题, 你可以参考下: https://ask.csdn.net/questions/955350
• 这篇博客也不错, 你可以看下vue配合el-table 根据绑定记录的值自定义el-table-column显示问题
• 除此之外, 这篇博客: vue中 el-table 实现拖拽排序教程中的 el-table基础上如何实现表格上下拖拽排序 部分也许能够解决你的问题。

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^