el-timeline is implemented with the el-select multi-selection process

renderings

 

Implement code 

<template>
  <div>
    <div class="block">
      <el-timeline>
        <el-timeline-item
            v-for="(activity, index) in activities"
            :key="index"
            :color="activity.color"
            :icon="activity.icon"
            >
          {
   
   {activity.content}}
          &nbsp;&nbsp;
          <el-link v-if="!activity.finish" type="primary" :underline="false" style="padding-bottom: 4px" @click="changeName(activity.nameInfo,index)">修改</el-link>
          <div>
            <p v-if="activity.nameInfo.length>0">
             {
   
   {getNameTxt(activity.nameInfo)}}
            </p>
            <p v-if="activity.remark!=''">备注: {
   
   {activity.remark}}</p>
            <p v-if="activity.timestamp!=''">{
   
   {activity.timestamp}}</p>
          </div>
        </el-timeline-item>
      </el-timeline>
    </div>
    <el-dialog
        title="修改审批人"
        :visible.sync="dialogVisible"
        width="500px"
        :before-close="handleClose">
      <span>
        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="审批人:">
            <el-select
                v-model="value"
                multiple
                value-key="keyId"
                filterable
                remote
                reserve-keyword
                placeholder="请输入关键词"
                :remote-method="remoteMethod"
                :loading="loading">
              <el-option
                  v-for="item in options"
                  :key="item.keyId"
                  :label="item.name"
                  :value="item">
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>


export default {

  name: "Demo",

  data() {
    return {
      dialogVisible:false,
      oppIndex:0,
      form:{
        name:"张三",
      },
      activities: [
        {
          content: '创建成功',
          nameInfo:[
            {
              name:'王峰',
              keyId:21,
            }
          ],
          remark:'',
          finish:true,
          timestamp: '2018-04-15 18:00:00',
          icon:'el-icon-success'
        }, {
          content: '一级负责人',
          nameInfo:[
            {
              name:'张三丰',
              keyId:21,
            }
          ],
          remark:'同意',
          finish:true,
          timestamp: '2018-04-13 18:40:00',
          icon:'el-icon-success'
        }, {
          content: '二级负责人',
          nameInfo:[
            {
              name:'李斯',
              keyId:11,
            },
            {
              name:'秦二世',
              keyId:12,
            },
            {
              name:'扶苏',
              keyId:13,
            }
          ],
          remark:'',
          finish:false,
          timestamp: ''
        }, {
          content: '三级负责人',
          nameInfo:[
            {
              name:'嬴政',
              keyId:11,
            },
            {
              name:'赵武',
              keyId:12,
            },
            {
              name:'齐秦',
              keyId:13,
            }
          ],
          remark:'',
          finish:false,
          timestamp: ''
        }, {
          content: '最终负责人',
          nameInfo:[
            {
              name:'司马师',
              keyId:11,
            },
            {
              name:'曹操',
              keyId:12,
            },
            {
              name:'张飞',
              keyId:13,
            }
          ],
          remark:'',
          finish:false,
          timestamp: ''
        }
      ],
      options: [],
      value: [],
      list: [],
      loading: false,
      states: [
        {
          "name":"张三",
          "keyId":1,
        },
        {
          "name":"李斯",
          "keyId":2,
        },
        {
          "name":"嬴政",
          "keyId":3,
        },
        {
          "name":"李健",
          "keyId":4,
        },
        {
          "name":"李白",
          "keyId":5,
        },
        {
          "name":"王五",
          "keyId":6,
        }
       ]
    };
  },

  methods: {
    handleClose(done) {
      done();
    },
    remoteMethod(query) {
      if (query !== '') {
        this.loading = true;
        setTimeout(() => {
          this.loading = false;
          this.options = this.list.filter(item => {
            return item.keyId.toLowerCase()
                .indexOf(query.toLowerCase()) > -1;
          });
        }, 200);
      } else {
        this.options = [];
      }
    },
    changeName(param,index){
      this.oppIndex=index;
      this.options=param;
      this.value=param;
      this.dialogVisible=true;
    },
    getNameTxt(param){
      if(param==null||param==undefined||param.length<1){
        return "";
      }
      let map = param.map(item=>item.name);
      return map.toString();
    },
    submit(){
      this.activities[this.oppIndex].nameInfo=this.value;
      this.dialogVisible = false;
    }
  },
  created() {

  },

  async mounted() {
    this.list = this.states.map(item => {
      return { name: `${item.name}`, keyId: `${item.keyId}` };
    });
  },
};
</script>
<style lang="less" scoped>


.dialog-footer {
  text-align: center;
}

.el-form {
  .el-input {
    width: 200px;
  }

  .el-form-item {
    margin-right: 60px;
    display: inline-block;
  }

  .width-200 {
    width: 200px;
  }
}

/deep/ .el-timeline-item__icon{
  color:#20B43A;
}
/deep/ .el-dialog__footer{
  text-align: center;
}

/deep/ .el-dialog__header {
  background-color: #F5F5F5;
}
</style>