组件库功能的补充

说明：一般组件库提供的组件是比较通用的，有些不怎么常用，但是会有实际需求的组件功能没有提供。有些是可以直接在原有组件库上增强的，有些就需要自己去实现了。对这些组件功能做一个记录。

一、elementUI的table组件实现动态增删可输入的表格  https://blog.csdn.net/weixin_44490021/article/details/132215845 

实现效果

解决方案

总体的解决思路是利用table组件的自定义列模板通过Scoped slot获取到 row, column, $index，拿到每一行的数据，再在动态赋给每行的input和select的v-model值中，直接上代码
template部分

<el-form-item label="添加信息" prop="remark">
  <!-- 添加按钮 -->
  <el-button type="primary" size="mini" @click="handleAdd">添加</el-button>
  <el-table
    :data="dataList"
    size="mini"
  >
    <el-table-column type="index" label="序号" width="50"></el-table-column>
    <el-table-column prop="companyName" label="公司名称" :show-overflow-tooltip="true" min-width="200">
      <template slot-scope="scope">
        <el-input
          v-model.trim="scope.row.companyName"
          placeholder="请输入公司名称"
          clearable
        >
        </el-input>
      </template>
    </el-table-column>
    <el-table-column prop="contractName" label="合同名称" :show-overflow-tooltip="true" min-width="200">
      <template slot-scope="scope">
        <el-select
          v-model="scope.row.contractName"
          placeholder="请选择合同"
          style="width: 100%"
        >
          <el-option
            v-for="item in contractList"
            :key="item.dicId"
            :label="item.dicItemName"
            :value="item.dicId"
          ></el-option>
        </el-select>
      </template>
    </el-table-column>
    <el-table-column prop="type" label="发票类型" :show-overflow-tooltip="true" min-width="100">
      <template slot-scope="scope">
        <el-select
          v-model="scope.row.type"
          placeholder="请选择发票类型"
          style="width: 100%"
        >
          <el-option
            v-for="item in typeList"
            :key="item.dicId"
            :label="item.dicItemName"
            :value="item.dicId"
          ></el-option>
        </el-select>
      </template>
    </el-table-column>
    <el-table-column prop="licenseBeginTime" label="开通时间" :show-overflow-tooltip="true" min-width="180">
      <el-date-picker
        v-model="form.licenseBeginTime"
        type="date"
        placeholder="选择开通时间"
        style="width: 100%"
      ></el-date-picker>
    </el-table-column>
    <el-table-column width="80" label="操作" fixed="right" align="center" class-name="small-padding fixed-width">
      <template slot-scope="scope">
        <el-button
          type="text"
          icon="el-icon-delete"
          @click="handleDelete(scope.$index, scope.row)"
        ></el-button>
      </template>
    </el-table-column>
  </el-table>
</el-form-item>

 

script部分

data() {
  return {
    dataList: [],
    contractList: [],
    typeList: []
  }
},
methods: {
  // 添加行
  handleAdd() {
    var _this = this

    let list = {
      companyName: '',
      contractName: '',
      type: '',
      licenseBeginTime: '',
    }

    _this.dataList.push(list)
  },
  // 删除行
  handleDelete(index, row) {
    var _this = this

    _this.dataList.splice(index, 1)
  },
}