kd-aiot-frontend/src/views/indicator/components/definitionDetials.vue

<template>
  <ele-modal
    :title="title"
    :visible.sync="visible"
    :close-on-click-modal="false"
    @close="handleClose"
    resizable
    maxable
    width="60%"
  >
    <div>
      <ele-pro-table
        ref="table"
        row-key="id"
        :columns="columns"
        :datasource="list"
      >
        <template v-slot:expand="{ row }">
          <el-table :data="row.values" border style="width: 100%">
            <el-table-column type="index" width="50" label="序号">
            </el-table-column>
            <el-table-column prop="name" label="选项"> </el-table-column>
          </el-table>
        </template>
      </ele-pro-table>
    </div>

    <template v-slot:footer>
      <el-button type="primary" @click="handleClose">确 定</el-button>
    </template>
  </ele-modal>
</template>

<script>
  import dictMixins from '@/mixins/dictMixins';

  export default {
    mixins: [dictMixins],
    data() {
      return {
        visible: false,
        title: '详情',
        list: []
      };
    },
    computed: {
      columns() {
        return [
          {
            width: 50,
            type: 'expand',
            columnKey: 'expand',
            align: 'center',
            slot: 'expand'
          },
          {
            width: 50,
            type: 'index',
            columnKey: 'index',
            align: 'center',
            label: '序号'
          },
          {
            prop: 'columnComment',
            label: '条件名称',
            align: 'center',
            minWidth: 150,
            showOverflowTooltip: true
          }
        ];
      }
    },
    methods: {
      // 外部调用，打开弹窗
      open(list) {
        this.list = list;
        console.log('this.list', this.list);
        this.visible = true;
      },
      // 关闭时清理表单
      handleClose() {
        this.visible = false;
      },
      // 提交
      submit() {}
    }
  };
</script>

<style scoped lang="scss"></style>