vue3.0+ts table新增删除行 和 某一元素可输入

#default=“scope"与#default=”{row}"的区分，scope作用域插槽
表头：

setup(){
    // 声明响应性变量
    const state = reactive<any>({
    	tableData:[],
    })
 	const column = [
      {
        label: "名称",
        prop: "BONDNAME",
        align: "center",
        width: 140,
      },
      {
        label: "年龄",
        prop: "total",
        align: "center",
        width: 120,
      },
      {
        label: "性别",
        prop: "YL",
        align: "center",
        width: 120,
      },
  ];
  const sexARR = [{"code":"1","label":"男"},{"code":"2","label":"女"}]

    // 新增一条
    function add() {
      state.tableData.push({
        name:"",
        age:"",
        sex:""
      });
    }

    function changeValue(e: any, row: any, index: number){
    	console.log("忘记是e还是e.target.value了",e);
      	state.tableData[index].age= e.target.value;
    }

    function changeSelect(e: any, row: any, index: number) {
      state.tableData[index].sex= e;
    }
    
    function deleteLine(row: any,index:number){
      // 根据下标去删除
      state.tableData.splice(index,1);
    }
    // 只有return出去的变量或方法才能在外部使用
    return {
      ...toRefs(state), // 注意要解构出来才能在外部直接用变量调用
      column,
      changeValue,
      changeSelect,
      add,
      deleteLine,
    };
}

模板：

 <el-table :data="tableData" style="width: 100%">
                <el-table-column
                  v-for="(item, index) in columnDireact"
                  :key="index"
                  :label="item.label"
                  :prop="item.prop"
                  :width="item.width"
                  :title="item.label"
                >
                  <template
                    #default="scope"
                    v-if="
                      item.prop === 'name' ||
                      item.prop === 'age' ||
                      item.prop === 'sex' 
                    "
                  >
                    <div v-if="item.prop === 'sex'">
                      <el-select
                        placeholder="请选择"
                        size="small"
                        clearable
                        v-model="scope.row.sex"
                        @change="
                          (e) => changeSelect(e, scope.row, scope.$index)
                        "
                      >
                        <el-option
                          v-for="items in sexARR"
                          :key="items.code"
                          :label="`${items.label}`"
                          :value="`${items.code}`"
                        >
                        </el-option>
                      </el-select>
                    </div>
                    <div v-if="item.prop === 'age'">
                      <el-input 
                      	v-model="scope.row.age" 
	                    @input="
	                      (e) => changeValue(e, scope.row, scope.$index)
                      "></el-input>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column label="操作" >
                  <template #default="scope">
                    <el-popconfirm
                      title="确定删除吗？"
                      @confirm="deleteLine(scope.row,scope.$index)"
                    >
                      <template #reference>
                        <el-svg-icon>
                          <i
                            class="el-icon-delete"
                            style="
                              color: #f0f0f0;
                              font-size: 16px;
                              cursor: pointer;
                            "
                          ></i>
                        </el-svg-icon>
                      </template>
                    </el-popconfirm>
                  </template>
                </el-table-column>
              </el-table>

最后

以上就是执着音响为你收集整理的vue3.0+ts table新增删除行 和 某一元素可输入的全部内容，希望文章能够帮你解决vue3.0+ts table新增删除行 和 某一元素可输入所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。