vue table动态lable与内容动态dome以及动态禁用

最新推荐文章于 2024-04-24 09:40:23 发布
最新推荐文章于 2024-04-24 09:40:23 发布
阅读量786 收藏
点赞数
分类专栏： vue-element表格 文章标签： javascript vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43059898/article/details/124198864
版权
这是一个使用Vue.js编写的表格组件示例，包含数据绑定、列定义、条件渲染和交互功能。表格中每一列根据类型展示不同内容，如文本、下拉选择、输入框等，并支持数据变更时的回调处理。组件还提供了附件上传和显示功能。
摘要由CSDN通过智能技术生成 
```javascript
<template>
 <div style="margin: 50px">
        <el-table
          :data="rightsDate"
          border
          empty-text="没有数据"
          style="width: 100%"
        >
          <el-table-column
            v-for="(item, index) in titleList"
            :key="index"
            :label="item.label"
            :fixed="index == 0 ? 'left' : false"
            :prop="item.prop"
            width="450"
          >
            <template slot-scope="scope">
              <!-- 第一列 -->
              <div v-if="scope.row[item.prop]">
                <div class="title_title">
                  {{ scope.row[item.prop].contentOne }}
                </div>
                <div class="title_color">
                  {{ scope.row[item.prop].contentTwo }}
                </div>
              </div>
              <!-- 第二列 -->
              <div v-if="scope.row[item.prop]">

                <div v-if="scope.row[item.prop].type == 1"
                  style="width: 100%; display: flex; align-items: center;flex-wrap: wrap;"
                >
                {{scope.row[item.prop].type}}
                  {{ scope.row[item.prop].title }}:&nbsp;&nbsp;
                  {{scope.row[item.prop].number}}
                  <div style="width: 88%">
                    <el-select
                    @change="BenifitChange($event,item.prop)"
                      size="mini"
                      :disabled="isDisabled"
                      v-model="scope.row[item.prop].number"
                      placeholder=""
                      style="width: 100%"
                    >
                      <el-option
                        label="0 No benefit for OrgUnit, not applicable, no direct or indirect comparable processes"
                        value="0"
                      >
                      </el-option>
                      <el-option
                        label="1 Partial benefit / no carry-over of distributed solution / approach but highly interesting case for OrgUnit"
                        value="1"
                      >
                      </el-option>
                      <el-option
                        label="2 High benefit, solution / approach fully adapted (taken over)"
                        value="2"
                      >
                      </el-option>
                      <el-option
                        label="5 Process to cover this failure already in place"
                        value="5"
                      >
                      </el-option>
                    </el-select>
                  </div>
                  <!-- Benifit为第一个选项 是否显示文本框 -->
                  <div  style="width: 100%;margin-top:10px" v-if="scope.row[item.prop].number == 0 && scope.row[item.prop].number !==''">
                     <el-input
                      size="mini"
                      :disabled="isDisabled"
                      type="textarea"
                      :rows="2"
                      placeholder="Pls fill in reason"
                      resize="none"
                      v-model="scope.row[item.prop].isContent.content"
                    >
                    </el-input>
                  </div>
                </div>

                <div v-if="scope.row[item.prop].type == 3">
                  <div v-if="scope.row[item.prop].isContent.view">
                    <el-input
                      size="mini"
                      :disabled="scope.row[item.prop].disabled"
                      type="textarea"
                      :rows="2"
                      placeholder=""
                      resize="none"
                      v-model="scope.row[item.prop].isContent.content"
                    >
                    </el-input>
                  </div>
                </div>

                <div v-if="scope.row[item.prop].type == 2">
                  {{scope.row[item.prop].type}}
                  <div
                v-if="scope.row[item.prop].isLevel.view"
                style="width: 100%; display: flex; align-items: center"
              >
                <div style="width: 30%">
                  <el-select
                    size="mini"
                    :disabled="scope.row[item.prop].disabled"
                    v-model="scope.row[item.prop].isYesNo"
                    placeholder=""
                    @change="onYse(scope.row[item.prop])"
                  >
                    <el-option label="Yes" value="Yes"> </el-option>
                    <el-option label="No" value="No"> </el-option>
                  </el-select>
                </div>
                &nbsp;&nbsp;
                <div
                  style="width: 20%"
                  v-if="scope.row[item.prop].isYesNo == 'Yes'"
                >
                  {{ scope.row[item.prop].title }}
                </div>
                <div
                  style="width: 60%"
                  v-if="scope.row[item.prop].isYesNo == 'Yes'"
                >
                  <el-select
                    size="mini"
                    :disabled="isDisabled || isBenifit"
                    v-model="scope.row[item.prop].number"
                    placeholder=""
                    style="width: 100%"
                  >
                    <!-- <el-option  label="0" value="0"> </el-option> -->
                    <el-option
                      label="1 Same product,same root cause"
                      value="1"
                    >
                    </el-option>
                    <el-option
                      label="2 Different product,same root cause"
                      value="2"
                    >
                    </el-option>
                  </el-select>
                </div>
                  </div>

                  <div v-else style="width: 40%">
                    <div
                      style="width: 20%"
                      v-if="scope.row[item.prop].isYesNo == 'Yes'"
                    >
                      {{ scope.row[item.prop].title }}
                    </div>
                    <el-select
                      size="mini"
                      :disabled="isDisabled || isBenifit"
                      v-model="scope.row[item.prop].isYesNo"
                      placeholder=""
                      @change="onYse(scope.row[item.prop])"
                    >
                      <el-option label="Yes" value="Yes"> </el-option>
                      <el-option label="No" value="No"> </el-option>
                    </el-select>
                  </div>
                </div>

                <div v-if="scope.row[item.prop].type == 4" style="width: 100%">
                  {{scope.row[item.prop].type}}
                  {{scope.row[item.prop].disabled}}
                  <div>
                    <div
                      v-if="scope.row[item.prop].isApplicable.view"
                      style="width: 40%"
                    >
                      <el-select
                        size="mini"
                        :disabled="scope.row[item.prop].disabled"
                        v-model="scope.row[item.prop].isApplicable.applicable"
                        placeholder=""
                        @change="applicable(scope.row[item.prop])"
                      >
                        <el-option
                          label="NotApplicable"
                          value="1"
                        >
                        </el-option>
                        <el-option
                          label="SimilarActionsPlanned"
                          value="2"
                        >
                        </el-option>
                        <el-option
                          label="NoActionsPlanned"
                          value="3"
                        >
                        </el-option>
                        <el-option
                          label="ActionsFinished"
                          value="4"
                        >
                        </el-option>
                        <el-option
                          label="ActionsPlanned"
                          value="5"
                        >
                        </el-option>
                      </el-select>
                    </div>
                    <!-- Fill in reasons -->
                    <!-- Not applicable、No actions planned -->
                    <div
                      v-if="
                        scope.row[item.prop].isApplicable.applicable == '2' ||
                        scope.row[item.prop].isApplicable.applicable == '5'
                      "
                      style="width: 40%; margin-top: 10px"
                    >
                      <el-date-picker
                        format="yyyy-MM-dd"
                        value-format="yyyy-MM-dd"
                        style="width: 100%"
                        size="mini"
                        :disabled="isDisabled || isBenifit"
                        v-model="scope.row[item.prop].isDate.date"
                        type="date"
                        placeholder=""
                      >
                      </el-date-picker>
                    </div>
                    <div
                      v-if="scope.row[item.prop].isContent.view"
                      style="margin-top: 10px"
                    >
                      <el-input
                        v-if="isDisabled == false "
                        size="mini"
                        type="textarea"
                        :rows="2"
                        :disabled="scope.row[item.prop].disabled"
                        resize="none"
                        :placeholder="
                          scope.row[item.prop].isApplicable.applicable == 1 ||
                          scope.row[item.prop].isApplicable.applicable == 3
                            ? 'Fill in reasons'
                            : 'Fill in actions'
                        "
                        v-model="scope.row[item.prop].isContent.content"
                      >
                      </el-input>

                      <el-input
                        v-if="isDisabled == true"
                        size="mini"
                        type="textarea"
                        :rows="2"
                        :disabled="scope.row[item.prop].disabled"
                        resize="none"
                        placeholder=""
                        v-model="scope.row[item.prop].isContent.content"
                      >
                      </el-input>
                    </div>
                  </div>
                </div>

                <div v-if="scope.row[item.prop].type == 6" style="width: 100%">
                  {{scope.row[item.prop].type}}
                  <el-select
                        size="mini"
                        :disabled="isBenifit"
                        v-model="scope.row[item.prop].number"
                        placeholder=""
                      >
                        <el-option v-for="(item,index) in checkedList" :label="item.label" :key="index" :value="item.value">
                          <svg-icon :icon-class="item.svg" style="font-size:20px"/>
                          {{item.label}}
                        </el-option>
                      </el-select>
                </div>
              </div>
            </template>
          </el-table-column>
        </el-table>
 </div>
</template>

<script>
export default {
  data() {
    return {
        isDisabled: false, // 是否禁用
        isBenifit: false,
        titleList: [
            {feedbackId: 0, label: "Affected Product", prop: "initcolumn"},
            {feedbackId: 0, label: "FPC1/3", prop: "FPC1/3"},
            {feedbackId: 0, label: "WSA", prop: "WSA"},
            {feedbackId: 0, label: "GBM", prop: "GBM"},
            {feedbackId: 0, label: "ABS9", prop: "ABS9"},
            {feedbackId: 0, label: "FPC5", prop: "FPC5"},
            {feedbackId: 0, label: "FPC7", prop: "FPC7"},
            {feedbackId: 0, label: "FPC8", prop: "FPC8"},
            {feedbackId: 0, label: "FPS", prop: "FPS"},
            {feedbackId: 0, label: "FPG2", prop: "FPG2"},
            {feedbackId: 0, label: "AHC", prop: "AHC"}
        ],
        rightsDate: [
            {
              "initcolumn":{"TRCMRCEXId":0,"contentOne":"","contentTwo":""},
              "FPC1/3":{"feedbackId":0,"type":"1","title":"Benifit","number":"","isYesNo":"","applicable":"","date":"","content":"","isLevel":null,"isDate":null,"isContent":{"view":true,"content":""},"isApplicable":null,"feedbackattachmentList":null},
              "WSA":{"feedbackId":0,"type":"1","title":"Benifit","number":"","isYesNo":"","applicable":"","date":"","content":"","isLevel":null,"isDate":null,"isContent":{"view":true,"content":""},"isApplicable":null,"feedbackattachmentList":null},
              "GBM":{"feedbackId":0,"type":"1","title":"Benifit","number":"","isYesNo":"","applicable":"","date":"","content":"","isLevel":null,"isDate":null,"isContent":{"view":true,"content":""},"isApplicable":null,"feedbackattachmentList":null},
              "ABS9":{"feedbackId":0,"type":"1","title":"Benifit","number":"","isYesNo":"","applicable":"","date":"","content":"","isLevel":null,"isDate":null,"isContent":{"view":true,"content":""},"isApplicable":null,"feedbackattachmentList":null},
              "FPC5":{"feedbackId":0,"type":"1","title":"Benifit","number":"","isYesNo":"","applicable":"","date":"","content":"","isLevel":null,"isDate":null,"isContent":{"view":true,"content":""},"isApplicable":null,"feedbackattachmentList":null},
              "FPC7":{"feedbackId":0,"type":"1","title":"Benifit","number":"","isYesNo":"","applicable":"","date":"","content":"","isLevel":null,"isDate":null,"isContent":{"view":true,"content":""},"isApplicable":null,"feedbackattachmentList":null},
              "FPC8":{"feedbackId":0,"type":"1","title":"Benifit","number":"","isYesNo":"","applicable":"","date":"","content":"","isLevel":null,"isDate":null,"isContent":{"view":true,"content":""},"isApplicable":null,"feedbackattachmentList":null},
              "FPS":{"feedbackId":0,"type":"1","title":"Benifit","number":"","isYesNo":"","applicable":"","date":"","content":"","isLevel":null,"isDate":null,"isContent":{"view":true,"content":""},"isApplicable":null,"feedbackattachmentList":null},
              "FPG2":{"feedbackId":0,"type":"1","title":"Benifit","number":"","isYesNo":"","applicable":"","date":"","content":"","isLevel":null,"isDate":null,"isContent":{"view":true,"content":""},"isApplicable":null,"feedbackattachmentList":null},
              "AHC":{"feedbackId":0,"type":"1","title":"Benifit","number":"","isYesNo":"","applicable":"","date":"","content":"","isLevel":null,"isDate":null,"isContent":{"view":true,"content":""},"isApplicable":null,"feedbackattachmentList":null},
            },
            {
              "initcolumn":{"TRCMRCEXId":0, "contentOne":"Repeat failure","contentTwo":""},
              "FPC1/3":{"feedbackId":0, disabled:false,"type":"2","title":"Level","number":"","isYesNo":"","applicable":"","date":"","content":"","isLevel":{"view":true},"isDate":null,"isContent":null,"isApplicable":null,"feedbackattachmentList":null},
              "WSA":{"feedbackId":0,disabled:false,"type":"2","title":"Level","number":"","isYesNo":"","applicable":"","date":"","content":"","isLevel":{"view":true},"isDate":null,"isContent":null,"isApplicable":null,"feedbackattachmentList":null},
              "GBM":{"feedbackId":0,disabled:false,"type":"2","title":"Level","number":"","isYesNo":"","applicable":"","date":"","content":"","isLevel":{"view":true},"isDate":null,"isContent":null,"isApplicable":null,"feedbackattachmentList":null},
              "ABS9":{"feedbackId":0,disabled:false,"type":"2","title":"Level","number":"","isYesNo":"","applicable":"","date":"","content":"","isLevel":{"view":true},"isDate":null,"isContent":null,"isApplicable":null,"feedbackattachmentList":null},
              "FPC5":{"feedbackId":0,disabled:false,"type":"2","title":"Level","number":"","isYesNo":"","applicable":"","date":"","content":"","isLevel":{"view":true},"isDate":null,"isContent":null,"isApplicable":null,"feedbackattachmentList":null},
              "FPC7":{"feedbackId":0,disabled:false,"type":"2","title":"Level","number":"","isYesNo":"","applicable":"","date":"","content":"","isLevel":{"view":true},"isDate":null,"isContent":null,"isApplicable":null,"feedbackattachmentList":null},
              "FPC8":{"feedbackId":0,disabled:false,"type":"2","title":"Level","number":"","isYesNo":"","applicable":"","date":"","content":"","isLevel":{"view":true},"isDate":null,"isContent":null,"isApplicable":null,"feedbackattachmentList":null},
              "FPS":{"feedbackId":0, disabled:false,"type":"2","title":"Level","number":"","isYesNo":"","applicable":"","date":"","content":"","isLevel":{"view":true},"isDate":null,"isContent":null,"isApplicable":null,"feedbackattachmentList":null},
              "FPG2":{"feedbackId":0, disabled:false,"type":"2","title":"Level","number":"","isYesNo":"","applicable":"","date":"","content":"","isLevel":{"view":true},"isDate":null,"isContent":null,"isApplicable":null,"feedbackattachmentList":null},
              "AHC":{"feedbackId":0, disabled:false,"type":"2","title":"Level","number":"","isYesNo":"","applicable":"","date":"","content":"","isLevel":{"view":true},"isDate":null,"isContent":null,"isApplicable":null,"feedbackattachmentList":null},
            },
            {
              "initcolumn":{"TRCMRCEXId":0,"contentOne":"Additional questions for feedback","contentTwo":"213123"},
              "FPC1/3":{"feedbackId":0,"type":"3", disabled:false,"title":null,"number":null,"isYesNo":null,"applicable":null,"date":null,"content":null,"isLevel":null,"isDate":null,"isContent":{"view":true,"content":""},"isApplicable":null,"feedbackattachmentList":null},
              "WSA":{"feedbackId":0,"type":"3", disabled:false,"title":null,"number":null,"isYesNo":null,"applicable":null,"date":null,"content":null,"isLevel":null,"isDate":null,"isContent":{"view":true,"content":""},"isApplicable":null,"feedbackattachmentList":null},
              "GBM":{"feedbackId":0,"type":"3", disabled:false,"title":null,"number":null,"isYesNo":null,"applicable":null,"date":null,"content":null,"isLevel":null,"isDate":null,"isContent":{"view":true,"content":""},"isApplicable":null,"feedbackattachmentList":null},
              "ABS9":{"feedbackId":0,"type":"3", disabled:false,"title":null,"number":null,"isYesNo":null,"applicable":null,"date":null,"content":null,"isLevel":null,"isDate":null,"isContent":{"view":true,"content":""},"isApplicable":null,"feedbackattachmentList":null},
              "FPC5":{"feedbackId":0,"type":"3", disabled:false,"title":null,"number":null,"isYesNo":null,"applicable":null,"date":null,"content":null,"isLevel":null,"isDate":null,"isContent":{"view":true,"content":""},"isApplicable":null,"feedbackattachmentList":null},
              "FPC7":{"feedbackId":0,"type":"3", disabled:false,"title":null,"number":null,"isYesNo":null,"applicable":null,"date":null,"content":null,"isLevel":null,"isDate":null,"isContent":{"view":true,"content":""},"isApplicable":null,"feedbackattachmentList":null},
              "FPC8":{"feedbackId":0,"type":"3", disabled:false,"title":null,"number":null,"isYesNo":null,"applicable":null,"date":null,"content":null,"isLevel":null,"isDate":null,"isContent":{"view":true,"content":""},"isApplicable":null,"feedbackattachmentList":null},
              "FPS":{"feedbackId":0,"type":"3", disabled:false,"title":null,"number":null,"isYesNo":null,"applicable":null,"date":null,"content":null,"isLevel":null,"isDate":null,"isContent":{"view":true,"content":""},"isApplicable":null,"feedbackattachmentList":null},
              "FPG2":{"feedbackId":0,"type":"3", disabled:false,"title":null,"number":null,"isYesNo":null,"applicable":null,"date":null,"content":null,"isLevel":null,"isDate":null,"isContent":{"view":true,"content":""},"isApplicable":null,"feedbackattachmentList":null},
              "AHC":{"feedbackId":0,"type":"3", disabled:false,"title":null,"number":null,"isYesNo":null,"applicable":null,"date":null,"content":null,"isLevel":null,"isDate":null,"isContent":{"view":true,"content":""},"isApplicable":null,"feedbackattachmentList":null},
            },
            {
              "initcolumn":{"TRCMRCEXId":0,"contentOne":"attachment","contentTwo":""},
              "FPC1/3":{"feedbackId":0,"type":"5", disabled:false,"title":null,"number":null,"isYesNo":null,"applicable":null,"date":null,"content":null,"isLevel":null,"isDate":null,"isContent":null,"isApplicable":null,"feedbackattachmentList":[{"ProductType":"FPC1/3","ProcessId":"60d98c3f-1b72-47a0-8882-6cef61652c96","attachmentId":4191,"oldName":"2022-03-30_15h30_23.png","URL":"file_store\\ProcessAttachment\\20220402","Name":"bf8ec15742f04111bb0b5e110f10cff5.png"}]},
              "WSA":{"feedbackId":0,"type":"5", disabled:false,"title":null,"number":null,"isYesNo":null,"applicable":null,"date":null,"content":null,"isLevel":null,"isDate":null,"isContent":null,"isApplicable":null,"feedbackattachmentList":[{"ProductType":"WSA","ProcessId":"60d98c3f-1b72-47a0-8882-6cef61652c96","attachmentId":4192,"oldName":"img17.jpg","URL":"file_store\\ProcessAttachment\\20220402","Name":"5cdb3eb1c7cd4eb1a6e6b3aaace95802.jpg"}]},
              "GBM":{"feedbackId":0,"type":"5", disabled:false,"title":null,"number":null,"isYesNo":null,"applicable":null,"date":null,"content":null,"isLevel":null,"isDate":null,"isContent":null,"isApplicable":null,"feedbackattachmentList":[]},
              "ABS9":{"feedbackId":0,"type":"5", disabled:false,"title":null,"number":null,"isYesNo":null,"applicable":null,"date":null,"content":null,"isLevel":null,"isDate":null,"isContent":null,"isApplicable":null,"feedbackattachmentList":[]},
              "FPC5":{"feedbackId":0,"type":"5", disabled:false,"title":null,"number":null,"isYesNo":null,"applicable":null,"date":null,"content":null,"isLevel":null,"isDate":null,"isContent":null,"isApplicable":null,"feedbackattachmentList":[]},
              "FPC7":{"feedbackId":0,"type":"5", disabled:false,"title":null,"number":null,"isYesNo":null,"applicable":null,"date":null,"content":null,"isLevel":null,"isDate":null,"isContent":null,"isApplicable":null,"feedbackattachmentList":[]},
              "FPC8":{"feedbackId":0,"type":"5", disabled:false,"title":null,"number":null,"isYesNo":null,"applicable":null,"date":null,"content":null,"isLevel":null,"isDate":null,"isContent":null,"isApplicable":null,"feedbackattachmentList":[]},
              "FPS":{"feedbackId":0,"type":"5", disabled:false,"title":null,"number":null,"isYesNo":null,"applicable":null,"date":null,"content":null,"isLevel":null,"isDate":null,"isContent":null,"isApplicable":null,"feedbackattachmentList":[]},
              "FPG2":{"feedbackId":0,"type":"5", disabled:false,"title":null,"number":null,"isYesNo":null,"applicable":null,"date":null,"content":null,"isLevel":null,"isDate":null,"isContent":null,"isApplicable":null,"feedbackattachmentList":[]},
              "AHC":{"feedbackId":0,"type":"5",disabled:false, "title":null,"number":null,"isYesNo":null,"applicable":null,"date":null,"content":null,"isLevel":null,"isDate":null,"isContent":null,"isApplicable":null,"feedbackattachmentList":[]},
            },
            {
                "initcolumn":{"TRCMRCEXId":12938, disabled:false,"contentOne":"Action1","contentTwo":"123123"},
                "FPC1/3":{"feedbackId":0,"type":"4", disabled:false,"title":"","number":"","isYesNo":"","applicable":"","date":"","content":"","isLevel":null,"isDate":{"view":true,"date":""},"isContent":{"view":true,"content":""},"isApplicable":{"view":true,"applicable":""},"feedbackattachmentList":null},
                "WSA":{"feedbackId":0,"type":"4", disabled:false,"title":"","number":"","isYesNo":"","applicable":"","date":"","content":"","isLevel":null,"isDate":{"view":true,"date":""},"isContent":{"view":true,"content":""},"isApplicable":{"view":true,"applicable":""},"feedbackattachmentList":null},
                "GBM":{"feedbackId":0,"type":"4",disabled:false,"title":"","number":"","isYesNo":"","applicable":"","date":"","content":"","isLevel":null,"isDate":{"view":true,"date":""},"isContent":{"view":true,"content":""},"isApplicable":{"view":true,"applicable":""},"feedbackattachmentList":null},
                "ABS9":{"feedbackId":0,"type":"4",disabled:false,"title":"","number":"","isYesNo":"","applicable":"","date":"","content":"","isLevel":null,"isDate":{"view":true,"date":""},"isContent":{"view":true,"content":""},"isApplicable":{"view":true,"applicable":""},"feedbackattachmentList":null},
                "FPC5":{"feedbackId":0,"type":"4",disabled:false,"title":"","number":"","isYesNo":"","applicable":"","date":"","content":"","isLevel":null,"isDate":{"view":true,"date":""},"isContent":{"view":true,"content":""},"isApplicable":{"view":true,"applicable":""},"feedbackattachmentList":null},
                "FPC7":{"feedbackId":0,"type":"4",disabled:false,"title":"","number":"","isYesNo":"","applicable":"","date":"","content":"","isLevel":null,"isDate":{"view":true,"date":""},"isContent":{"view":true,"content":""},"isApplicable":{"view":true,"applicable":""},"feedbackattachmentList":null},
                "FPC8":{"feedbackId":0,"type":"4",disabled:false,"title":"","number":"","isYesNo":"","applicable":"","date":"","content":"","isLevel":null,"isDate":{"view":true,"date":""},"isContent":{"view":true,"content":""},"isApplicable":{"view":true,"applicable":""},"feedbackattachmentList":null},
                "FPS":{"feedbackId":0,"type":"4", disabled:false,"title":"","number":"","isYesNo":"","applicable":"","date":"","content":"","isLevel":null,"isDate":{"view":true,"date":""},"isContent":{"view":true,"content":""},"isApplicable":{"view":true,"applicable":""},"feedbackattachmentList":null},
                "FPG2":{"feedbackId":0,"type":"4",disabled:false,"title":"","number":"","isYesNo":"","applicable":"","date":"","content":"","isLevel":null,"isDate":{"view":true,"date":""},"isContent":{"view":true,"content":""},"isApplicable":{"view":true,"applicable":""},"feedbackattachmentList":null},
                "AHC":{"feedbackId":0,"type":"4", disabled:false,"title":"","number":"","isYesNo":"","applicable":"","date":"","content":"","isLevel":null,"isDate":{"view":true,"date":""},"isContent":{"view":true,"content":""},"isApplicable":{"view":true,"applicable":""},"feedbackattachmentList":null},
            },
            {
                "initcolumn":{"TRCMRCEXId":12939,"contentOne":"Action2","contentTwo":"123123"},
                "FPC1/3":{"feedbackId":0,"type":"4", disabled:false,"title":"","number":"","isYesNo":"","applicable":"","date":"","content":"","isLevel":null,"isDate":{"view":true,"date":""},"isContent":{"view":true,"content":""},"isApplicable":{"view":true,"applicable":""},"feedbackattachmentList":null},
                "WSA":{"feedbackId":0,"type":"4", disabled:false,"title":"","number":"","isYesNo":"","applicable":"","date":"","content":"","isLevel":null,"isDate":{"view":true,"date":""},"isContent":{"view":true,"content":""},"isApplicable":{"view":true,"applicable":""},"feedbackattachmentList":null},
                "GBM":{"feedbackId":0,"type":"4", disabled:false,"title":"","number":"","isYesNo":"","applicable":"","date":"","content":"","isLevel":null,"isDate":{"view":true,"date":""},"isContent":{"view":true,"content":""},"isApplicable":{"view":true,"applicable":""},"feedbackattachmentList":null},
                "ABS9":{"feedbackId":0,"type":"4", disabled:false,"title":"","number":"","isYesNo":"","applicable":"","date":"","content":"","isLevel":null,"isDate":{"view":true,"date":""},"isContent":{"view":true,"content":""},"isApplicable":{"view":true,"applicable":""},"feedbackattachmentList":null},
                "FPC5":{"feedbackId":0,"type":"4", disabled:false,"title":"","number":"","isYesNo":"","applicable":"","date":"","content":"","isLevel":null,"isDate":{"view":true,"date":""},"isContent":{"view":true,"content":""},"isApplicable":{"view":true,"applicable":""},"feedbackattachmentList":null},
                "FPC7":{"feedbackId":0,"type":"4", disabled:false,"title":"","number":"","isYesNo":"","applicable":"","date":"","content":"","isLevel":null,"isDate":{"view":true,"date":""},"isContent":{"view":true,"content":""},"isApplicable":{"view":true,"applicable":""},"feedbackattachmentList":null},
                "FPC8":{"feedbackId":0,"type":"4", disabled:false,"title":"","number":"","isYesNo":"","applicable":"","date":"","content":"","isLevel":null,"isDate":{"view":true,"date":""},"isContent":{"view":true,"content":""},"isApplicable":{"view":true,"applicable":""},"feedbackattachmentList":null},
                "FPS":{"feedbackId":0,"type":"4", disabled:false,"title":"","number":"","isYesNo":"","applicable":"","date":"","content":"","isLevel":null,"isDate":{"view":true,"date":""},"isContent":{"view":true,"content":""},"isApplicable":{"view":true,"applicable":""},"feedbackattachmentList":null},
                "FPG2":{"feedbackId":0,"type":"4", disabled:false,"title":"","number":"","isYesNo":"","applicable":"","date":"","content":"","isLevel":null,"isDate":{"view":true,"date":""},"isContent":{"view":true,"content":""},"isApplicable":{"view":true,"applicable":""},"feedbackattachmentList":null},
                "AHC":{"feedbackId":0,"type":"4", disabled:false,"title":"","number":"","isYesNo":"","applicable":"","date":"","content":"","isLevel":null,"isDate":{"view":true,"date":""},"isContent":{"view":true,"content":""},"isApplicable":{"view":true,"applicable":""},"feedbackattachmentList":null},
            },
             {
                "initcolumn":{"TRCMRCEXId":12938, "contentOne":"Action3","contentTwo":"123123"},
                "FPC1/3":{"feedbackId":0,"type":"4", disabled:false,"title":"","number":"","isYesNo":"","applicable":"","date":"","content":"","isLevel":null,"isDate":{"view":true,"date":""},"isContent":{"view":true,"content":""},"isApplicable":{"view":true,"applicable":""},"feedbackattachmentList":null},
                "WSA":{"feedbackId":0,"type":"4", disabled:false,"title":"","number":"","isYesNo":"","applicable":"","date":"","content":"","isLevel":null,"isDate":{"view":true,"date":""},"isContent":{"view":true,"content":""},"isApplicable":{"view":true,"applicable":""},"feedbackattachmentList":null},
                "GBM":{"feedbackId":0,"type":"4", disabled:false,"title":"","number":"","isYesNo":"","applicable":"","date":"","content":"","isLevel":null,"isDate":{"view":true,"date":""},"isContent":{"view":true,"content":""},"isApplicable":{"view":true,"applicable":""},"feedbackattachmentList":null},
                "ABS9":{"feedbackId":0,"type":"4", disabled:false,"title":"","number":"","isYesNo":"","applicable":"","date":"","content":"","isLevel":null,"isDate":{"view":true,"date":""},"isContent":{"view":true,"content":""},"isApplicable":{"view":true,"applicable":""},"feedbackattachmentList":null},
                "FPC5":{"feedbackId":0,"type":"4",disabled:false,"title":"","number":"","isYesNo":"","applicable":"","date":"","content":"","isLevel":null,"isDate":{"view":true,"date":""},"isContent":{"view":true,"content":""},"isApplicable":{"view":true,"applicable":""},"feedbackattachmentList":null},
                "FPC7":{"feedbackId":0,"type":"4",disabled:false,"title":"","number":"","isYesNo":"","applicable":"","date":"","content":"","isLevel":null,"isDate":{"view":true,"date":""},"isContent":{"view":true,"content":""},"isApplicable":{"view":true,"applicable":""},"feedbackattachmentList":null},
                "FPC8":{"feedbackId":0,"type":"4",disabled:false,"title":"","number":"","isYesNo":"","applicable":"","date":"","content":"","isLevel":null,"isDate":{"view":true,"date":""},"isContent":{"view":true,"content":""},"isApplicable":{"view":true,"applicable":""},"feedbackattachmentList":null},
                "FPS":{"feedbackId":0,"type":"4",disabled:false,"title":"","number":"","isYesNo":"","applicable":"","date":"","content":"","isLevel":null,"isDate":{"view":true,"date":""},"isContent":{"view":true,"content":""},"isApplicable":{"view":true,"applicable":""},"feedbackattachmentList":null},
                "FPG2":{"feedbackId":0,"type":"4", disabled:false,"title":"","number":"","isYesNo":"","applicable":"","date":"","content":"","isLevel":null,"isDate":{"view":true,"date":""},"isContent":{"view":true,"content":""},"isApplicable":{"view":true,"applicable":""},"feedbackattachmentList":null},
                "AHC":{"feedbackId":0,"type":"4",disabled:false,"title":"","number":"","isYesNo":"","applicable":"","date":"","content":"","isLevel":null,"isDate":{"view":true,"date":""},"isContent":{"view":true,"content":""},"isApplicable":{"view":true,"applicable":""},"feedbackattachmentList":null},
            },
                {
                "initcolumn":{"TRCMRCEXId":12938, "contentOne":"Action4","contentTwo":"123123"},
                "FPC1/3":{"feedbackId":0,"type":"4", disabled:false,"title":"","number":"","isYesNo":"","applicable":"","date":"","content":"","isLevel":null,"isDate":{"view":true,"date":""},"isContent":{"view":true,"content":""},"isApplicable":{"view":true,"applicable":""},"feedbackattachmentList":null},
                "WSA":{"feedbackId":0,"type":"4", disabled:false,"title":"","number":"","isYesNo":"","applicable":"","date":"","content":"","isLevel":null,"isDate":{"view":true,"date":""},"isContent":{"view":true,"content":""},"isApplicable":{"view":true,"applicable":""},"feedbackattachmentList":null},
                "GBM":{"feedbackId":0,"type":"4", disabled:false,"title":"","number":"","isYesNo":"","applicable":"","date":"","content":"","isLevel":null,"isDate":{"view":true,"date":""},"isContent":{"view":true,"content":""},"isApplicable":{"view":true,"applicable":""},"feedbackattachmentList":null},
                "ABS9":{"feedbackId":0,"type":"4", disabled:false,"title":"","number":"","isYesNo":"","applicable":"","date":"","content":"","isLevel":null,"isDate":{"view":true,"date":""},"isContent":{"view":true,"content":""},"isApplicable":{"view":true,"applicable":""},"feedbackattachmentList":null},
                "FPC5":{"feedbackId":0,"type":"4",disabled:false,"title":"","number":"","isYesNo":"","applicable":"","date":"","content":"","isLevel":null,"isDate":{"view":true,"date":""},"isContent":{"view":true,"content":""},"isApplicable":{"view":true,"applicable":""},"feedbackattachmentList":null},
                "FPC7":{"feedbackId":0,"type":"4",disabled:false,"title":"","number":"","isYesNo":"","applicable":"","date":"","content":"","isLevel":null,"isDate":{"view":true,"date":""},"isContent":{"view":true,"content":""},"isApplicable":{"view":true,"applicable":""},"feedbackattachmentList":null},
                "FPC8":{"feedbackId":0,"type":"4",disabled:false,"title":"","number":"","isYesNo":"","applicable":"","date":"","content":"","isLevel":null,"isDate":{"view":true,"date":""},"isContent":{"view":true,"content":""},"isApplicable":{"view":true,"applicable":""},"feedbackattachmentList":null},
                "FPS":{"feedbackId":0,"type":"4",disabled:false,"title":"","number":"","isYesNo":"","applicable":"","date":"","content":"","isLevel":null,"isDate":{"view":true,"date":""},"isContent":{"view":true,"content":""},"isApplicable":{"view":true,"applicable":""},"feedbackattachmentList":null},
                "FPG2":{"feedbackId":0,"type":"4", disabled:false,"title":"","number":"","isYesNo":"","applicable":"","date":"","content":"","isLevel":null,"isDate":{"view":true,"date":""},"isContent":{"view":true,"content":""},"isApplicable":{"view":true,"applicable":""},"feedbackattachmentList":null},
                "AHC":{"feedbackId":0,"type":"4",disabled:false,"title":"","number":"","isYesNo":"","applicable":"","date":"","content":"","isLevel":null,"isDate":{"view":true,"date":""},"isContent":{"view":true,"content":""},"isApplicable":{"view":true,"applicable":""},"feedbackattachmentList":null},
            },
        ],
        checkedList:[
            {value:'L',svg:'nanguo',label:'Checked:potential risk'},
            {value:'K',svg:'yiban',label:'Potential risk detected,actions on going'},
            {value:'J',svg:'kaixin',label:'Checked:Nopossibility of happening or low risk'},
            {value:'O',svg:'hongqi',label:'Problem warner'},
            {value:'S',svg:'linxin',label:'Not affected'},
        ],
    };
  },
  created() {},
  components: {},
  mounted() {},

  methods: {
    /**
     * benifit回调
     */
    BenifitChange(e,row) {
      if(e == 0) {
         this.rightsDate.forEach(item=>{
        item[row].disabled = true
      })
      } else {
        this.rightsDate.forEach(item=>{
        item[row].disabled = false
      })
      }
    },

        /**
     * 是否显示 LEVEl
     * @value 是否显示选择框
     */
    onYse(value) {
      if (value.isYesNo == "No") {
        value.isLevel.view = false;
        value.number = "0";
      } else {
        value.isLevel.view = true;
        value.number = "1";
      }
    },

        /**
     * 是否显示 文本框
     * @value 是否显示 文本框
     */
    applicable(value) {
      let changValue = value.isApplicable.applicable;
      value.isDate.date = "";
      switch (changValue) {
        case "1":
          value.isContent.view = true;
          value.isDate.view = false;
          break;
        case "3":
        case "4":
          value.isContent.view = true;
          value.isDate.view = false;
          break;
        case "2":
        case "5":
          value.isContent.view = true;
          value.isDate.view = true;
          break;
        default:
          value.isContent.view = true;
          value.isDate.view = false;
          break;
      }
    },

  },
};
</script>

<style lang="scss" scoped>
</style>
今晚来我家吗
关注
专栏目录
antd table动态表头_vue element 中的table动态渲染实现（动态表头）
weixin_39828193的博客
12-22 2922
通过在vue中使用element的table表格，实现数据动态渲染，并且动态渲染表头。通过在父组件中引入子组件表格，然后向子组件传递表格数据和表头数据。子组件table中template模板:data="this.tableData"height="400px"max-height="400px"size="small"row-class-name="row"cell-class-name="co...
【Vue+Element-UI】Table表格：动态Table
  ╭じò ぴé╮。Qi
04-22 3467
对Element-UI官方Table表格进行二次封装。实现动态Table，Table表头定制化展示。并且可全局使用该组件，方便后期维护。
Vue的动态绑定
weixin_51528263的博客
06-06 490
在 Vue.js 中，冒号:或 v-bind 指令用于动态绑定 HTML 属性，:label和:value前面加上了冒号:，表示这是一个动态绑定的属性。冒号后面的表达式item.label和item.value会被解析为 Vue.js 实例中的 data 数据，当 supplier对象的属性值发生变化时，<el-option>组件的label和value属性也会自动更新。如果不加冒号，则表示这是一个静态属性，显示在前端的就只是“supplier.name”这个字
VUE el-label动态改变文字
最新发布
柳鲲鹏
04-24 710
试图通过绑定属性的想法，是不可能的。直接使用变量就可以。
vue中使用ele组件table实现动态列
wch19960518的博客
03-14 1768
vue3中table拼接动态列
vue+avue-crud动态拼接表头label
“ 春风若有怜花意，能否许我再少年。”
08-30 635
【代码】avue动态拼接label。
vue element-ui table组件的动态label和动态slot跳转
weixin_49857492的博客
05-20 3070
近期工作中有个需求需要对多条每个月数据进行表格展示，由于每个月数据是递增的今年5月、6月、7月等，并且用户能够根据点击的月份数据跳转到当月详情。 效果图： 每月数据都可以点击 用户名 userid 2021-09 2021-10 2021-11 2021-12 你是帅哥 123 12 13 14 看你确实有点帅 123 24 25 26 30 接受数据例子： json = { content:[ { userName:‘你是帅哥’, userId: ‘1
Vue中动态显示表格内容
m0_44949211的博客
08-14 6532
Vue中动态显示表格内容 在项目中，我们可能会用到表格来显示不同的数据，表格显示数据，无非是列的内容不同，所以，我们可以考虑封装个公共的表格组件，动态得显示不同的数据 实现截图如下： 1.首先在项目中创建一个公共表格组件table.vue，代码如下 <template> <!--这里放其他内容，表格等--> <el-table :data="tableData" border style="width: 100%;" v-loading="tableLoading"
Vue动态添加内容,并在列表页显示
weixin_44826979的博客
12-06 3272
需求描述 实现文本输入一条数据，在列表里面显示，并将文本框内容清空 点击添加一条按钮，将添加的数据在列表页显示 点击删除一条按钮，将最后一条数据删除 点击移除所有按钮，将列表页内容全部清空 点击删除，就将最后一条数据删除， 点击隐藏按钮，将整个内容隐藏 点击显示按钮，将隐藏的内容显示出来 代码实现 <!DOCTYPE html> <html> <head>...
vue动态组件
酷爱前端的小陈博客
05-01 8195
1. 什么是动态组件 动态组件指的是动态切换组件的显示与隐藏。 2. 如何实现动态组件渲染 vue 提供了一个内置的 <component> 组件，专门用来实现动态组件的渲染。示例代码如下： 3. 使用 keep-alive 保持状态 默认情况下，切换动态组件时无法保持组件的状态。此时可以使用vue 内置的 <keep-alive> 组件保持动态组 件的状态。示例代码如下： 4. keep-alive 对应的生命周期函数 当组件被缓存时，会自动触发...
在Vue中动态绑定label标签中的for (Interpolation inside attributes has been removed)
xiaosheng
05-16 6255
在Vue中想要动态绑定label中的for的值,一开始这样写的: <div id="app"> <label for="{{ name }}"><span>{{ message}}</span></label> <input type="text" id="{{ name }}" key="{{ name }}"> <button @click="loginType">切换类型</bu.
element中动态设置label的值
m0_59168984的博客
02-24 4013
element中动态设置label的值
vue----el-form-item动态生成表单名称和表单内容项
maidu_xbd的博客
07-01 5113
需求描述：由于后台返回的json对象中的key（属性）值不都是一样的，所以要求动态的把json对象中的key（属性）返显到表单的label，json对象中的value（值）返显到表单的input里。如左图的json对象，动态生成表单如右图。 解决思路： ①将json对象的key(即属性)转化为一个数组：Object.keys(); ②利用v-for遍历key组成的数组，取到所有的key; ③使用nodeForm[key]取到对应的value 知识点： Object.keys()...
vue el-table列表中根据value显示label
qq_43498712的博客
03-29 4688
el-table列表中根据value显示label 适用情况： 后端返回的page只有编码，要求显示名称。 能够获取list ,包含所有的编码和名称 关键代码： <el-table-column prop="regionCode" label="站点" header-align="center" align="center" > <template slot-scope=
vue el-table动态表格表头+对应数据
weixin_48305373的博客
06-13 3734
注意：绑定的两个数组，数据要处理，后台返回的数据结构要对应
elementUi table树形表格列名时间区间
爱前端灬不爱恋爱的博客
12-28 485
首先我本地先创建一个data.json文件 数据格式为 [ { "name":"成品", "parentCode":"0", "code":"1", "level":"0", "children":[ { "name":"材料1", "parentCode":"1", "code":"1-1", "level":"1", "c
JVXETable中禁用某一行的解决方法
峰会路转的博客
06-17 3254
最近在使用jeecg做后台管理系统，遇到了jvxtable中需要禁用某一行的需求 按照官网的demo写法，只是实现了所有的cell禁止编辑，禁止选中还是不行！相关的资料太少了，尝试了很多方法都为解决，于是找到了他们的框架底层 vxe-table传送门 然后再我的组件里面增加了这个配置 这样就实现了，禁用当前id这样的选中！！效果如第一张图片所示boot3框架内部demo却没有这么复杂，也实现了这个禁用某行的效果！不知道是哪个步骤的骚操作实现的，有知道的大神可以告知下，多谢了！！...
vue实现el-table-column中自定义label
青莳的博客
01-30 2607
默认的label只能显示普通文字，如果有一些特殊需求，比如换行显示，更改文字颜色，更改文字大小，就需要自定义label了
Vue Router 动态路由实现与问题解析
"Vue Router 实现动态路由和常见问题...动态路由的实现涉及到前端与后端的紧密协作，以及对Vue Router特性的深入理解。通过合理的策略和方法，可以构建出适应不同用户需求的动态路由系统，提高应用的灵活性和用户体验。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值