vue+iview table列表新增一行数据(折叠/展开)展示

需求: 有个表单优化需求,需要把项目中所有的备注内容/意见反馈等超长的字段单独抽出来一行展示,有的要默认展开/有的收起来就整理了下

// 第一步: 新建一个组件,remarkContent跟用到的页面放在同一个文件夹下
<template>
   <div class='remark-content'>
     <Row>
        <Col>
           <span class='remark-key'>备注内容: </span>
           <span>{{ row }}</span>
        </Col>
     </Row>
   </div>
</template>

<script>
   export default {
       name:'remarkContent',
       props: {
          row: String
       }
       data () {
          return {}
        },
      created () {},
     //方法
      methods: {}
   }
</script>
<style lang='less' scoped>
  .remark-content {
     .remark-key {
        margin-right: 10px;
        font-weight: bold;
        color: #515a6e;
        font-size: 12px;
     }
  }
</style>

在用到组件的页面,render渲染出来(组件根据需求还可以更优化,比如key可以在父组件直接设置好传不同的值,子组件只负责展示字段,看个人需求优化)

// 我是在formShowRisk等表单页面用到组件remarkContent(提示:table组件的运用在iview官网有各种样子按需选择)
<template>
   <div class='form-show-risk'>
     <Table border stripe highlight-row :columns='columns' :data='data'></Table>
   </div>
</template>

<script>
  import remarkContent from './remarkContent';
   export default {
       components: { remarkContent }
       name:'formShowRisk',
       data () {
          return {
            columns: [
              {
               title: '展开', type: 'expand', width: '60',
               render: (h, params) => {
                  return h(remarkContent, {
                     props: {
                        row: params.row.content  // 传给子组件的值
                       }
                  })
                }
              },
              {title: '备注时间', key: 'createtime'},
              {title: '备注原因', key: 'addreason'},
              {title: '客户电话', key: 'clientphone'},
              {title: '备注列队', key: 'logrolename'},
              {title: '备注人', key: 'logusername'},
              {title: '计划回复时间', key: 'intendReply'}
            ],
            data: []
          }
        },
      created () {
        this.getLogList()
      },
      methods: {
        getLogList () {
          let url = this.C.Api.GET_TASKLOG_LIST  // 根据统一封装的axios,调取接口
          let params = {}
          http.post(url, params).then(res => {
            if (res.code == '000000') {
              for (let i=0; i<res.rows.length; i++) {
                res.rows[i]._expanded = true  // _expanded属性控制展开/关闭
              }
              this.data = res.rows
            }
          })
        }
      }
   }
</script>
<style lang='less' scoped>
  .form-show-risk {}
</style>

最后样式是这样的